/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                       TreeGrid CSS style                                                      */
/*                                                          Turq style                                                           */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* 
   This file defines all CSS classes for TreeGrid to show grid and sheet and Gantt header. Gantt chart is defined in Gantt.css 
   
   This file contains three sections:
      1) BASE DEFINITIONS - For easy customization. Contains particular attributes of CSS classes. All theses CSS classes are fully defined in section 3) ALL GRID DEFINITIONS
      2) GRID SECTIONS AND SCROLLBARS - Contains full definition of nine TreeGrid sections, splitters and scrollbars. Can be also easily customized.
      3) ALL GRID DEFINITIONS - Contains full definition of all TreeGrid CSS classes, except the ones defined in 2) GRID SECTIONS AND SCROLLBARS. Can be hardly customized, only for precise changes.
*/


/* 
   Special classes to be used as switches in responsive design:

   TTMain class is added to grid and dialogs the most parent node 
   TTTiny, TTMini, TTSmall, TTLow, TTNormal, TTWide, TTHigh, TTBig and TTGiant are added with TTMain according to the chosen StyleSize, use to preset any CSS class according to the chosen StyleSize.
   TTLow is preset also by Small, Mini and Tiny, TTSmall is preset also by Mini and Tiny and TTMini is preset also by Tiny 
   TTWide is preset also by High, Big and Giant, TTHigh is preset also by Big and Giant and TTBig is preset also by Giant

   TTIE, TTFF and TTWK class is added along with TTMain for particular browser engine (IE = IE/Edge, FF = Firefox, WK = WebKit)
   TTTouch is added along with TTMain if the grid is shown on tablet without mouse 
   TTRtl is added along with TTMain if grid is in right to left mode, for dir="rtl"

   TTDB class is added to row <tr> tags and to dialog main tags (TTMenuMain,TTPickMain) for DynamicBorder = 1
*/

/* 
   Special tags and classes to be used inside grid cells to highlight some text or its part:

   <b> or GridBold - strong highlight, usually colored blue or green and bold
   <i> or GridBlue - highlight, usually colored blue or green
   <em> or GridRed - error or another highlight, usually colored red. Using <b> or GridBold inside the <em> makes the text bold, but preserves the red color.
   <s> or GridGray - deleted or lowlight, usually colored gray. Using <b> or GridBold inside the <s> makes the text bold, but preserves the gray color.
*/



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* -------------------------------------------------------------------------------------------------------------------------- */

/*                                                  1) BASE DEFINITONS FOR CUSTOMIZATION                                         */

/* -------------------------------------------------------------------------------------------------------------------------- */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/*
   For easy customization. Contains particular attributes of CSS classes. All theses CSS classes are fully defined in section 3) ALL GRID DEFINITIONS
*/




/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                      Fonts and text line heights                                              */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* !!! Base font and heights are defined in Dialog.css !!! */

/* Font used for Button type cell with button Tab, only in above and below row (Space = -1 and 5) */
.TTRowAbove .TTTabHtmlBase,.TTRowBelow .TTTabHtmlBase,.TTEditTab { font-size:15px; line-height:22px; }
.TTWide .TTRowAbove .TTTabHtmlBase,.TTWide .TTRowBelow .TTTabHtmlBase,.TTWide .TTEditTab { font-size:18px; }
.TTGiant .TTRowAbove .TTTabHtmlBase,.TTGiant .TTRowBelow .TTTabHtmlBase,.TTGiant .TTEditTab { font-size:23px; line-height:28px; }
.TTSmall .TTRowAbove .TTTabHtmlBase,.TTSmall .TTRowBelow .TTTabHtmlBase,.TTSmall .TTEditTab { font-size:inherit; line-height:inherit; }

.TTPagesLink,.TTPagesLinkActive { font-size:14px; line-height:18px; }
.TTWide .TTPagesLink,.TTWide .TTPagesLinkActive { font-size:17px; line-height:20px; }
.TTGiant .TTPagesLink,.TTGiant .TTPagesLinkActive { font-size:22px; line-height:26px; }
.TTLow .TTPagesLink,.TTLow .TTPagesLinkActive { font-size:inherit; line-height:inherit; }

/* All the predefined above fonts inherited children */
.TTHeaderFont *,.TTRowAbove .TTTabHtmlBase *,.TTRowBelow .TTTabHtmlBase * { font-size:inherit; line-height:inherit; }

/* Predefines highlight tags */
.TTHeaderRow b,.TTHeaderRow i,.TTHeaderRow .GridBold,.TTHeaderRow .GridBlue,.TTGridButton b,.TTGridButton i,.TTGridButton .GridBold,.TTGridButton .GridBlue,
.TTTabHtml1 b,.TTTabHtml1 i,.TTTabHtml1 .GridBold,.TTTabHtml1 .GridBlue,.TTMenuFocus b,.TTMenuFocus i,.TTMenuFocus .GridBold,.TTMenuFocus .GridBlue { color:#c0ff00; }
.TTHeaderRow em,.TTHeaderRow em>b,.TTHeaderRow .GridRed,.TTHeaderRow .GridRed .GridBold,.TTGridButton em,.TTGridButton em>b,.TTGridButton .GridRed,.TTGridButton .GridRed .GridBold,.TTGridButton em,
.TTTabHtml1 em>b,.TTTabHtml1 .GridRed,.TTTabHtml1 .GridRed .GridBold,.TTMenuFocus em,.TTMenuFocus em>b,.TTMenuFocus .GridRed,.TTMenuFocus .GridRed .GridBold { color:#c50000; }
.TTHeaderRow s,.TTHeaderRow .GridGray,.TTHeaderRow s>b,.TTHeaderRow .GridGray .GridBold,.TTHeaderRow s>i,.TTHeaderRow .GridGray .GridBlue,
.TTGridButton s,.TTGridButton .GridGray,.TTGridButton s>b,.TTGridButton .GridGray .GridBold,.TTGridButton s>i,.TTGridButton .GridGray .GridBlue,
.TTTabHtml1 s,.TTTabHtml1 .GridGray,.TTTabHtml1 s>b,.TTTabHtml1 .GridGray .GridBold,.TTTabHtml1 s>i,.TTTabHtml1 .GridGray .GridBlue, 
.TTMenuFocus s,.TTMenuFocus .GridGray,.TTMenuFocus s>b,.TTMenuFocus .GridGray .GridBold,.TTMenuFocus s>i,.TTMenuFocus .GridGray .GridBlue { color:#aebab9; }

 
/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                       Row height                                                              */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Classes are not assigned, only the height attribute is read. @ Set the height in pixels only. */

/* Base row height. Default minimal height in pixels of all rows in table, special rows are set individually later. It is outer height including all cell border and padding. */
/* It can be easily increased. It can be easily decreased up to described minimum for given style size. If decreased more, it is required also to decrease line-height for given style size. */
.TTRowHeight { height:30px; }                  /* Minimum 30px (line-height + 14px (for TTWide + 10px) ) */
.TTHigh .TTRowHeight { height:40px; }          /* Minimum 40px (line-height + 20px) */
.TTBig .TTRowHeight { height:50px; }           /* Minimum 50px (line-height + 30px (for TTGiant + 26px) ) */
.TTLow .TTRowHeight { height:25px; }           /* Minimum 25px (line-height + 9px) */
.TTSmall .TTRowHeight { height:20px; }         /* Minimum 20px (line-height + 4px) */
.TTMini .TTRowHeight { height:17px; }          /* Minimum 17px (line-height + 1px) */

/* Default minimal height in pixels of Header rows. It is outer height including all cell border and padding. */
/* It can be easily increased. It can be easily decreased up to described minimum for given style size. If decreased more, it is required also to decrease line-height for given style size. */
.TTHeaderRowHeight { height:50px; }            /* Minimum 30px (line-height + 8px (for TTWide + 2px) ) */
.TTHigh .TTHeaderRowHeight { height:70px; }    /* Minimum 40px (line-height + 12px) */
.TTBig .TTHeaderRowHeight { height:100px; }    /* Minimum 50px (line-height + 22px (for TTGiant + 14px) ) */
.TTLow .TTHeaderRowHeight { height:40px; }     /* Minimum 25px (line-height + 5px) */
.TTSmall .TTHeaderRowHeight { height:30px; }   /* Minimum 22px (line-height + 0px) */
.TTTiny .TTHeaderRowHeight { height:20px; }    /* Minimum 17px (line-height + 1px) */

/* Default minimal height in pixels of Filter rows. It is outer height including all cell border and padding. */
/* It can be easily increased. It can be easily decreased up to described minimum for given style size plus border width defined for TTFilterInner. If decreased more, it is required also to decrease line-height for given style size. */
.TTFilterRowHeight { height:40px; }            /* Minimum 30px + border */
.TTHigh .TTFilterRowHeight { height:48px; }    /* Minimum 40px + border */
.TTBig .TTFilterRowHeight { height:56px; }     /* Minimum 50px + border */
.TTLow .TTFilterRowHeight { height:31px; }     /* Minimum 25px + border */
.TTSmall .TTFilterRowHeight { height:26px; }   /* Minimum 20px + border */
.TTTiny .TTFilterRowHeight { height:20px; }    /* Minimum 17px + border */

/* Default minimal height in pixels of ColTree rows. It is outer height including all cell border and padding. */
/* It can be easily increased. It can be easily decreased up to described minimum for given style size plus border width defined for TSFilterInner. If decreased more, it is required also to decrease line-height for given style size. */
.TTColTreeRowHeight { height:20px; }            /* Minimum 16px */
.TTHigh .TTColTreeRowHeight { height:24px; }    /* Minimum 20px */
.TTBig .TTColTreeRowHeight { height:32px; }     /* Minimum 24px */
.TTLow .TTColTreeRowHeight { height:16px; }     /* Minimum 12px */
.TTSmall .TTColTreeRowHeight { height:14px; }   /* Minimum 12px */
.TTTiny .TTColTreeRowHeight { height:13px; }    /* Minimum 12px */

/* Default minimal height in pixels of all Space rows. It is outer height including all cell border and padding, but not the margin. */
/* Every Space row can have defined also its margin, see TTSpaceRow and other Space row styles. And cell margin defined by TTSpaceMargin. */
/* It can be easily increased. It can be easily decreased up to described minimum for given style size. If decreased more, it is required also to decrease line-height for given style size. */
.TTSpaceRowHeight { height:40px; }             /* Minimum 26px */
.TTHigh .TTSpaceRowHeight { height:46px; }     /* Minimum 30px */
.TTBig .TTSpaceRowHeight { height:50px; }      /* Minimum 34px (for TTGiant 38px)  */
.TTLow .TTSpaceRowHeight { height:33px; }      /* Minimum 20px */
.TTSmall .TTSpaceRowHeight { height:30px; }    /* Minimum 20px */
.TTTiny .TTSpaceRowHeight { height:22px; }     /* Minimum 20px */

/* Default minimal height in pixels of all Space = -1 and Space = 5 rows. It is outer height including all cell border and padding, but not the margin. */
/* It can be easily increased. It can be easily decreased up to described minimum for Space rows for given style size. If decreased more, it is required also to decrease line-height for given style size. */
.TTSpaceOutRowHeight { height:28px; }          /* Minimum 26px */
.TTHigh .TTSpaceOutRowHeight { height:35px; }  /* Minimum 30px */
.TTBig .TTSpaceOutRowHeight { height:45px; }   /* Minimum 34px (for TTGiant 38px)  */
.TTSmall .TTSpaceOutRowHeight { height:20px; } /* Minimum 20px */

/* --- Space cell margin --- */

/* Horizontal and vertical margin in pixels around all Space row cells. It can be easily increased or decreased to 0. @ Set only margin */
.TTSpaceMargin { margin:0px; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                  Column width                                                             */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Multiplier in % of column width and pager width for every style size */
/* !!! If not 100%, modifies the Width attribute value of the <C> and <Pager> tags !!! */
.TTWidth { width:100%; }
.TTWide .TTWidth { width:120%; }
.TTGiant .TTWidth { width:165%; }
.TTLow .TTWidth { width:85%; }

/* Multiplier in % of Space cells width for every style size */
/* !!! If not 100%, modifies the Width attribute value of the Space cells !!! */
.TTSpaceWidth { width:100%; }
.TTWide .TTSpaceWidth { width:120%; }
.TTGiant .TTSpaceWidth { width:165%; }
.TTLow .TTSpaceWidth { width:95%; }

/* Reserved with for of all the right side buttons; @ Set only width */
.TTWidthPad { width:25px; }
.TTWide .TTWidthPad { width:30px; }
.TTBig .TTWidthPad { width:45px; }
.TTLow .TTWidthPad { width:20px; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                           Major colors, backgrounds and borders                                               */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* !!! Base text color is defined in Dialog.css !!! */

/* Listed only major TreeGrid parts, other parts can be set by individual CSS classes later in this file */

/* Base background for all grid contents */
.TTMainTable { background:white; padding:1px; }
.TTSoft .TTMainTable { background:#F2F2F2; }
.TTDim .TTMainTable { background:EAEAEA; }

/* ------------------------------------------------- Space rows and cells --------------------------------------------------- */

/* Background for Space rows */
.TTSolidRow { background:#E0F0F2; }                                                                            /* All space rows */
.TTDim .TTSolidRow { background:#D0E0E2; }
.TTTabberRow { background:#E8F4FF; }                                                                           /* Tabber row with Tab type cells */
.TTFillRow { background:#F7F7F7; border-left:1px solid #ECECEC; border-right:1px solid #ECECEC; }              /* Special Space row Kind="Fill" shown for ConstHeight='1'*/ 
.TTNoDataRow { border-left:1px solid #ECECEC; border-right:1px solid #ECECEC; background:white; }              /* Special Space row Kind="NoData" shown when all body rows are hidden */
.TTSoft .TTNoDataRow { background-color:#F2F2F2; }
.TTDim .TTNoDataRow { background-color:#EAEAEA; }
.TTRowSpace4 .TTSolidRow { background:white; }                                                                 /* Bottom space rows */
.TTSoft .TTRowSpace4 .TTSolidRow { background:#F2F2F2; }
.TTDim .TTRowSpace4 .TTSolidRow { background:#EAEAEA; }
.TTRowAbove,.TTRowBelow { }                                                                                    /* Used instead of SolidRow and Kind types in row Space=-1 and Space=5 */
.TTDim .TTRowAbove,.TTDim .TTRowBelow { background-color:#EAEAEA; }

/* Cell Type="Select" or cell with Button="Defaults" or editable cell in Space cell */
.TTSpaceSelectInner,.TTSpaceSelectInnerIcon,.TTSpaceEditInner,.TTSpaceEditInnerIcon { border:1px solid #ABD7D3; background-color:white; }
.TTDim .TTSpaceSelectInner,.TTDim .TTSpaceSelectInnerIcon,.TTDim .TTSpaceEditInner,.TTDim .TTSpaceEditInnerIcon { background-color:#F2F2F2; }

/* Tab cell (Type="Button", Button="Tab") */
.TTTabHtmlBase { background:#C5EBF0 url(VLineTab.svg) 100% 100%/1px 50% no-repeat; text-align:center; } /* Base tab */
.TTTabHtml1,.TTTabHtmlIcon1 { background:#166785; color:white; font-weight:bold; }                      /* Selected tab*/

/* Html Button cell (Type="Button", Button="Html" */
.TTToolHtml,.TTToolHtml1,.TTToolHtmlIcon,.TTToolHtmlIcon1 { text-align:center; }                        /* Base button */
.TTToolHtml1,.TTToolHtmlIcon1 { font-weight:bold; color:#00a194; }                                      /* Selected button */

/* Cell Type="Pages" in Space cell */
.TTPagesLink { }                                                                                        /* One link */
.TTPagesLinkActive { color:black; font-weight:bold; text-decoration:none!important; }                   /* Link to actual page*/

/* DropCols type cell in Space row */
.TTHeaderGroup { color:white; background:#85CDC7; border-left:5px solid transparent; border-right:5px solid transparent; }     /* set to every DropCols inner table cells, except the last one */
.TTHeaderGroupFocus { background-color:#56AEA7; }       /* Added to the DropCols inner table cell during dragging inside the DropCols line (to be moved) */
.TTHeaderGroupDelete { background-color:#EAFAFD; }      /* added to the DropCols inner table cell during dragging outside the DropCols line (to be removed) */
.TTHeaderGroupCustom { font-style:italic; color:#BBB; } /* set to the last cell in DropCols inner table, as the default text "To group by, drag column caption here" */


/* -------------------------------------------------- Table rows and cells ------------------------------------------------- */

/* Border for all standard (non Space) TreeGrid cells */
/* !!! If changed horizontal border width, it increases row height, therefore the TTRowHeight should be changed accordingly */
.TTCellBase { border-bottom:0px none; border-right:1px solid #D8D8D8; border-left:0px none; border-top:0px none; }
.TTBright .TTCellBase { border-right-color:#CACACA; }
.TTDim .TTCellBase { border-right-color:#C2C2C2; }
.TTRtl .TTCellBase { border-left:1px solid #D8D8D8; border-right:0px none; }
.TTRtl.TTBright .TTCellBase { border-left-color:#CACACA; }
.TTRtl.TTDim .TTCellBase { border-left-color:#C2C2C2; }
.TTColTreeRow .TTCellBase { border:0px none; }

/* Special border for the first row and first column on printed page when set ShowPrintPageBreaks >= 2 */
.TTRowPageBreak > .TTCellBase { border-top:2px dashed #56AEA7!important; }
.TTColPageBreak { border-left:2px dashed #56AEA7; } /* Here can be set only left border */
.TTGanttPageBreak { border-left:2px dashed #56AEA7; }
.TTIE .TTColPageBreak, .TTIE .TTGanttPageBreak { border-left:2px solid #56AEA7; }
.TTIE .TTRowPageBreak > .TTCellBase { border-top:2px solid #56AEA7!important; }

/* Special class to choose if the last cells in column or row section will render its border; Not used in grid, only border width is read; Set border-right and border-bottom; set it to 0px to SHOW the border */
.TTLastCell { border-right:1px solid; border-bottom:0px solid; }

/* Color, background and border for Header row */
.TTCellHeader { color:white; background:#56AEA7 url(VLineHeader.svg) 100% 100%/1px 50% no-repeat; border:0px none; } /* Normal header */
.TTHeaderFocus { background:#85CDC7; }                              /* Added during dragging the Header cell */
.TTHeaderDrag { background:#85CDC7; border-right:1px solid white; } /* Added to ghost Header cell under mouse cursor during dragging the Header cell */
.TTLevelButton { font-weight:bold; color:white; }                   /* Header cell Levels */

/* Color and background for Index column */
.TTCellIndex { color:white; background:#56AEA7; }                   /* Normal index */
.TTCellIndexAlternate { background:#85CDC7; }                       /* Added to index in Alternate row*/
.TTColTreeRow .TTCellIndex { background:white; }                    /* Empty index in ColTree row */

/* Color and inner cell border for Filter row */
.TTFilterInner { border:1px solid #ABD7D3; color:#00a194; }         /* Inner filter cell */  
.TTFilter0Value { color:silver; }                                   /* Inactive filter */

/* Other cells  */
.TTRadioChecked { color:#00a194; }                                  /* Radio type cell - selected radio text */
.TTCellUser { background-color:#E0F0F2; }                           /* User cell section defined by <I LeftHtml MidHtml RightHtml/> */
.TTDim .TTCellUser { background-color:#D0E0E2; }
.TTTags span { background:#56AEA7; color:white!important; border-radius:5px; } /* Attribute Tags */

/* Gantt Header */
.TTGanttHeaderBase { text-align:center; color:white; border-right:1px solid #ABD7D3; } /* All Gantt Headers */
.TTGanttHeaderBase i { font-style:normal; vertical-align:top; color:black; }
.TTGanttHeaderBase b { color:#FF4; }
.TTGanttHeader1 { } 
.TTGanttHeader1 i { font-size:14px; }
.TTHigh .TTGanttHeader1 i { font-size:16px; }
.TTGiant .TTGanttHeader1 i { font-size:20px; }
.TTLow .TTGanttHeader1 i { font-size:13px; }
.TTGanttHeader2 { color:black; padding-top:2px; }
.TTGanttHeader3 { border-top:1px solid #ABD7D3; padding-bottom:2px; }
.TTGanttHeader4 { }
.TTGanttHeader2,.TTGanttHeader3,.TTGanttHeader4,.TTGanttHeader6 { font-size:14px; line-height:18px; }
.TTWide .TTGanttHeader2,.TTWide .TTGanttHeader3,.TTWide .TTGanttHeader4,.TTWide .TTGanttHeader6 { font-size:16px; line-height:20px; }
.TTGiant .TTGanttHeader2,.TTGiant .TTGanttHeader3,.TTGiant .TTGanttHeader4,.TTGiant .TTGanttHeader6 { font-size:20px; line-height:24px; }
.TTLow .TTGanttHeader2,.TTLow .TTGanttHeader3,.TTLow .TTGanttHeader4,.TTLow .TTGanttHeader6 { font-size:13px; line-height:16px; padding-top:0px; }
.TTGanttHeader2 i,.TTGanttHeader3 i,.TTGanttHeader4 i,.TTGanttHeader6 i { font-size:11px; }
.TTWide .TTGanttHeader2 i,.TTWide .TTGanttHeader3 i,.TTWide .TTGanttHeader4 i,.TTWide .TTGanttHeader6 i { font-size:13px; }
.TTGiant .TTGanttHeader2 i,.TTGiant .TTGanttHeader3 i,.TTGiant .TTGanttHeader4 i,.TTGiant .TTGanttHeader6 i { font-size:16px; }
.TTLow .TTGanttHeader2 i,.TTLow .TTGanttHeader3 i,.TTLow .TTGanttHeader4 i,.TTLow .TTGanttHeader6 i { font-size:10px; }
.TTGanttHeader5 { font-size:11px; line-height:14px; height:28px; border-top:1px solid #ABD7D3; }
.TTWide .TTGanttHeader5 { font-size:13px; line-height:16px; height:32px; }
.TTGiant .TTGanttHeader5 { font-size:16px; line-height:20px; height:40px; }
.TTLow .TTGanttHeader5 { font-size:10px; line-height:12px; height:24px; }

/* ------------------------------------- Cell and row state colors and classes -------------------------------------------- */

/* Here are define defined only some colors, the rest is defined in section "State colors and classes" later in this file */
/* The ...Color... classes are never assigned, they are used only to read the color. 
   All the colors except ...FocusedCell... and ...Default are relative colors, are added to the ...Default color; if the result color number exceeds 0x1000000, it is subtracted by the 0x1000000 */

/* Base colors */
.TTColorDefault { background-color:#FFFFFF; }                       /* Base color for all cells, can be changed by <I Color /> attribute */
.TTSoft .TTColorDefault { background-color:#F2F2F2; }
.TTDim .TTColorDefault { background-color:#EAEAEA; }
.TTColorNoFocus { }  .TTClassNoFocus { color:#999; }             /* Cell with CanFocus='0' */
.TTColorReadOnly { } .TTClassReadOnly { color:#999; }            /* Cell with CanEdit='0' */
.TTVivid .TTClassNoFocus,.TTVivid .TTClassReadOnly,.TTDim .TTClassNoFocus,.TTDim .TTClassReadOnly { color:#888; }
.TTColorFormula { background-color:#FDE8A1; } .TTClassFormula { }   /* Cell with editable formula */
.TTColorAlternate { background-color:#F3F3F3; }                     /* Alternate row color. Color for <Cfg Alternate/>, can be changed by <I AlternateColor /> */
.TTBright .TTColorAlternate { background-color:#EAEAEA; }
.TTColorSelected,.TTColorSelectedCell { background-color:#FEF0C2; } /* Selected row or cell */
.TTBright .TTColorSelected,.TTBright .TTColorSelectedCell { background-color:#FEF059; }
.TTColorError { background-color:#FFD2D2; }                         /* Cell with Error attribute set */

/* Row / Cell state colors, are ignored if row has set NoColorState='1' */
.TTColorDeleted { background-color:#FFE2E2; }                       /* Deleted row */
.TTBright .TTColorDeleted { background-color:#FFD1D1; }
.TTColorAdded { background-color:#CDFFCD; }                         /* Newly added row */
.TTBright .TTColorAdded { background-color:#B5FFB5; }
.TTColorMoved2 { background-color:#D7EBEB; }                        /* Row moved to another parent */
.TTBright .TTColorMoved2 { background-color:#DDFFFF; }
.TTColorChanged { background-color:#E8E8FF; }                       /* Row with some cell value changed */
.TTBright .TTColorChanged { background-color:#D6D6FF; }
.TTColorChangedCell { background-color:#EEE; }                      /* The cell with value changed */
.TTBright .TTColorChangedCell { background-color:#DDD; }

/* Other colors */
.TTColorFiltered { background-color:#FAFAF2; }                      /* Row that fulfills filter condition if set ColorFilter */
.TTColorDetail { background-color:#FFF0FF; }                        /* Row is master row, has set <I Detail /> attribute */
.TTColorDetailSelected { background-color:#FFF0E0; }                /* Master row actually shown in detail grid */
.TTColorDragged { background-color:#E0E0C0; }                       /* The source row actually being dragged by mouse */
.TTColorCellMenu { background-color:#f7d085; }                      /* The cell showing cell popup Menu */

/* Cell under mouse cursor (only if set HoverCell="Color") */
.TTColorHoveredCell { background-color:#Ffe0cc; }                   /* Standard cell */
.TTColorHoveredCellReadOnly { background-color:#F0F0F0; }           /* Cell with CanEdit='0' */
.TTColorHoveredCellNoFocus { background-color:#F8F8F8; }            /* Cell with CanFocus='0' */
.TTColorHoveredCellHeader { background-color:#388; }                /* Cell in Header row */
.TTColorHoveredCellIndex { background-color:#388; }                 /* Cell in column RowIndex */
.TTColorHoveredCellSpace { background-color:#FFFFFF; }              /* Space row cell */
.TTColorHoveredCellTab { background-color:#B5DBE0; }                /* Space row cell of Type="Button" and Button="Tab" */
.TTColorHoveredCellTab1 { background-color:#005060; }               /* Space row cell of Type="Button" and Button="Tab" and value 1*/
.TTColorHoveredCellSpaceBool0,.TTColorHoveredCellSpaceBool1,.TTColorHoveredCellSpaceBoolX,.TTColorHoveredCellSpaceBoolIcon { background-color:#FFFFFF; } /* Space row cell of Type="Bool" */
.TTColorHoveredCellButton,.TTColorHoveredCellButton1 { background-color:#F6F6F6; }     /* Space row cell of Type="Button" and Button="Html" */

/* Focused cell, the color is absolute color (only if set FocusCell="Color") */
.TTColorFocusedCell,.TTColorFocusedCellRelative { background-color:#FFFFFE; }  /* Standard cell */
.TTDim .TTColorFocusedCell,.TTDim .TTColorFocusedCellRelative { background-color:#F2F2F2; }
.TTClassFocusedCell,.TTClassFocusedCell * { color:black!important; }
.TTColorFocusedCellRect { background-color:#AFC; }                             /* Standard cell if more cells are focused */
.TTClassFocusedCellSpaceEdit > div { border:1px solid #6EBCB6!important; }     /* Editable Space cell */
.TTClassFocusedCellSpaceDefaults > div { border:1px solid #6EBCB6!important; } /* Space cell Type="Select" or with Button="Defaults" */

/* Side colors set by ColorCursor attribute */
.TTColorDefaultCol { background-color:#56AEA7; }                    /* Base background color for ColorCursor row - Header */
.TTColorDefaultRow { background-color:#56AEA7; }                    /* Base background color for ColorCursor column - Index */   

/* -------------------------------------- Cell and row cursors (focus & hover) ------------------------------------------ */

.TTHoverRowBackground { opacity:0.1; background:#F60; }             /* Displayed over whole row under mouse cursor (only if set HoverRow="Background") */
.TTFocusRowBackground { opacity:0.1; background:black; }            /* Displayed over whole focused row (only if set FocusRow="Background") */
.TTHoverRowBorder { border-top:1px solid #6EBCB6; border-bottom:1px solid #6EBCB6; }  /* Displayed around row under mouse cursor (only if set HoverRow="Border") */
.TTFocusRowBorder { border:1px solid #6EBCB6; }                     /* Displayed around focused row (only if set FocusRow="Border") */
.TTHoverCellBorder { border:1px solid #6EBCB6; background:white; }  /* Displayed around cell under mouse cursor (only if set HoverCell="Border") */
.TTFocusCellBorder { border:3px solid #6EBCB6; }                    /* Displayed around focused cell (only if set FocusCell="Border") */
.TTEditCellBorder { border:3px solid #FF6600; }                     /* Displayed around focused cell in EditMode (only if set FocusCell="Border") */
.TTFocusCellCorner { border:1px solid white; background:#2E8A83; }  /* Small rectangle displayed right bottom focused cell (only if set FocusCell="Corner" or FocusRect = "2") */
.TTEditCellCorner { border:1px solid white; background:#FF6666; }   /* Small rectangle displayed right bottom focused cell in EditMode (only if set FocusCell="Corner" or FocusRect = "2") */


/* ---------------------------------------------------- Other parts ----------------------------------------------------- */

/* Side pager */
.TTPagerMain { }                                                                           /* Pager outer */
.TTPagerHeader { background:#56AEA7; color:white; border-bottom:1px solid #ECECEC; }       /* Pager header */
.TTPagerHeaderSingle { }                                                                   /* Pager header if there is only header in head rows */
.TTPagerBody { background:#F3F3F3; border-bottom:1px solid #ECECEC; border-top:1px solid #ECECEC; }      /* Pager body */
.TTBright .TTPagerBody { background:#EAEAEA; }
.TTSoft .TTPagerBody { background:#E5E5E5; }
.TTDim .TTPagerBody { background:#DEDEDE; }
.TTPagerBodyLeft,.TTPagerHeaderLeft { border-left:1px solid #ECECEC; }                     /* Pager body and header when displayed on left side */
.TTPagerBodyRight,.TTPagerHeaderRight { border-right:1px solid #ECECEC; }                  /* Pager body and header when displayed on right side */
.TTRtl .TTPagerBodyLeft,.TTRtl .TTPagerHeaderLeft { border-right:1px solid #ECECEC; border-left:0px none; }   /* Pager body and header when displayed on left side in RTL mode*/
.TTRtl .TTPagerBodyRight,.TTRtl .TTPagerHeaderRight { border-left:1px solid #ECECEC; border-right:0px none; } /* Pager body and header when displayed on right side in RTL mode */
.TTPagerItem { border-top:1px solid transparent; }                                         /* One page */
.TTPagerItem:nth-child(even) { background:white; }                                         /* Every even page */
.TTSoft .TTPagerItem:nth-child(even) { background:#F2F2F2; }
.TTDim .TTPagerItem:nth-child(even) { background:#EAEAEA; }
.TTPagerFocus { background:#6EBCB6; }                                                      /* Cursor for actually displayed page */
.TTPagerHover { background:#6EE; opacity:0.2; }                                            /* Page under mouse */

/* Hint. Shown in place of the cell content if the cell content is not shown the whole */
.TTHintMain { border:1px solid #6EBCB6; background:white; }                                /* Main tag containing the Hint */
.TTHintOuter { background:white; color:black; border-color:white; }                        /* Tag with cell content, overrides cell settings */
.TTHintSpaceSelectOuter { border:1px solid #124D64; }                                      /* Tag with cell content for Space cell Type="Select" or Button="Defaults" */
.TTHintHeaderOuter { background:#388; color:white; }                                       /* Tag with cell content for Header cell */

/* Menus, dialogs and messages, redefinition for TGLib */
.TTEnumMenuHeader { border:3px solid #56AEA7; }                                            /* Added to MenuHeader for Enum type cell */

/* Grid and dialog buttons */
u.TTGridButton { background:linear-gradient(#166785,#0D3645); border:1px solid #ABD7D3; border-radius:3px; color:white; }
u.TTToolButtonButton1,u.TTToolSpaceButton1,u.TTToolButtonButton1:active,u.TTToolSpaceButton1:active { background:linear-gradient(#0D3645,#166785); color:yellow; }



















/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* -------------------------------------------------------------------------------------------------------------------------- */

/*                                                   2) GRID SECTIONS AND SCROLLBARS                                             */

/* -------------------------------------------------------------------------------------------------------------------------- */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 
   Contains full definition of nine TreeGrid sections, splitters and scrollbars. 
   Can be easily customized.
   In the description, the sentence starting by "@" lists what only should be changed in the CSS class
*/


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                        Grid sections                                                          */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* -------------- Table sections with cells, <div> tag inside <td> tag ------------------ */

/* They control border and spaces between grid sections. 
   @ Set border, padding and margin. Set them with relation to Splitters, Scrollbars and Space rows settings.
   ...Head... (<Head> top fixed rows), ...Body... (<Body> variable rows), ...Foot... (<Foot> bottom fixed rows)
   ...Left (<LefCols> left fixed columns), ...Mid (<Cols> variable columns), ...Right (<RightCols> right fixed columns)
   ...SectionScroll is set to the tag inside section that has overflow:scroll; @ Do not change
   ...Print is used for printing instead of all three sections
   ...EmptyGap is used in browsers where minimal width of td tag is 1px (mostly on tablets)
!! Sections on horizontal direction (...Left, ...Mid, ...Right) must have the same height (border+padding+margin)
!! Sections on vertical direction (...Head..., ...Body..., ...Foot...) must have the same width (border+padding+margin)
*/
.TTBodyLeft,.TTBodyMid,.TTBodyRight,.TTHeadLeft,.TTHeadMid,.TTHeadRight,.TTFootLeft,.TTFootMid,.TTFootRight { }
.TTHeadLeft,.TTBodyLeft,.TTFootLeft { border-left:1px solid #ECECEC;  }	
.TTHeadMid,.TTBodyMid,.TTFootMid { border-left:1px solid #D8D8D8; border-right:1px solid #D8D8D8; }
.TTHeadMidPrint,.TTBodyMidPrint,.TTFootMidPrint { border-left:1px solid #D8D8D8; }
.TTRtl .TTHeadMidPrint,.TTRtl .TTBodyMidPrint,.TTRtl .TTFootMidPrint { border-right:1px solid #D8D8D8; border-left:0px none; }	
.TTHeadMid.TTSplitterLeft,.TTBodyMid.TTSplitterLeft,.TTFootMid.TTSplitterLeft { border-left:1px solid #D8D8D8; }
.TTHeadMid.TTSplitterRight,.TTBodyMid.TTSplitterRight,.TTFootMid.TTSplitterRight { border-right:1px solid #D8D8D8; }
.TTBright .TTBodyLeft,.TTBright .TTBodyMid,.TTBright .TTBodyRight,.TTBright .TTHeadLeft,.TTBright .TTHeadMid,.TTBright .TTHeadRight,.TTBright .TTFootLeft,.TTBright .TTFootMid,.TTBright .TTFootRight { border-left-color:#CACACA; border-right-color:#CACACA; }
.TTMain .TTHeadRight,.TTMain .TTBodyRight,.TTMain .TTFootRight { border-right:1px solid #ECECEC; }
.TTHeadLeft,.TTHeadMid,.TTHeadRight,.TTHeadMidPrint { border-top:1px solid #56AEA7; }
.TTHasSpace1 .TTHeadLeft,.TTHasSpace1 .TTHeadMid,.TTHasSpace1 .TTHeadRight,.TTHasSpace1 .TTHeadMidPrint { border-bottom:1px solid #ECECEC; }
.TTHasHead .TTHeadLeft,.TTHasHead .TTHeadMid,.TTHasHead .TTHeadRight,.TTHasHead .TTHeadMidPrint { border-top:1px solid #ECECEC; }
.TTBodyLeft,.TTBodyMid,.TTBodyRight,.TTBodyMidPrint { border-top:1px solid #ECECEC; border-bottom:1px solid #ECECEC; }
.TTHasFoot .TTBodyLeft,.TTHasFoot .TTBodyMid,.TTHasFoot .TTBodyRight,.TTHasFoot .TTBodyMidPrint { border-bottom:1px solid #56AEA7; }
.TTHasSpace2 .TTBodyLeft,.TTHasSpace2 .TTBodyMid,.TTHasSpace2 .TTBodyRight,.TTHasSpace2 .TTBodyMidPrint { border-bottom:1px solid #ECECEC; }
.TTFootLeft,.TTFootMid,.TTFootRight,.TTFootMidPrint { border-top:1px solid #56AEA7; border-bottom:1px solid #ECECEC; }
.TTHasSpace2 .TTFootLeft,.TTHasSpace2 .TTFootMid,.TTHasSpace2 .TTFootRight,.TTHasSpace2 .TTFootMidPrint { border-top:1px solid #ECECEC; }
.TTSoft .TTBodyLeft,.TTSoft .TTBodyMid,.TTSoft .TTBodyRight,.TTSoft .TTHeadLeft,.TTSoft .TTHeadMid,.TTSoft .TTHeadRight,.TTSoft .TTFootLeft,.TTSoft .TTFootMid,.TTSoft .TTFootRight { border-color:#D2D2D2; }
.TTDim .TTBodyLeft,.TTDim .TTBodyMid,.TTDim .TTBodyRight,.TTDim .TTHeadLeft,.TTDim .TTHeadMid,.TTDim .TTHeadRight,.TTDim .TTFootLeft,.TTDim .TTFootMid,.TTDim .TTFootRight { border-color:#C2C2C2; }
.TTSoft .TTHasFoot .TTBodyLeft,.TTSoft .TTHasFoot .TTBodyMid,.TTSoft .TTHasFoot .TTBodyRight,.TTSoft .TTHasFoot .TTBodyMidPrint { border-bottom:1px solid #56AEA7; }
.TTBodyMidPrint { overflow:hidden; }
.TTEmptyGap { padding-left:1px; }

/* -------------- Splitters between resizable table sections, <td> tag ------------------ */

/* The <td> tags are shown between the sections <td> tags when set <Cfg LeftWidth, MidWidth, RightWidth/> attributes and <Cfg SectionResizing='1'/>
   They control horizontal space between the resizable sections. 
   @ Set left/right border and padding and also width and background.
   LeftSplitter is between ...Left and ...Mid column sections and RightSplitter is between ...Mid and ...Right column sections.
   The splitter tag is shown in every row section (Head,Body,Foot) and in the horizontal scrollbars section.
   ...HeadSplitter, ...BodySplitter, ...FootSplitter is added for appropriate row section, ...ScrollSplitter is added to splitter between horizontal scrollbars
   ...SplitterDisabled is added if the sections cannot be resized now, due their actual width or permissions
*/
.TTLeftSplitter,.TTRightSplitter { background:#306460; width:5px; overflow:hidden; cursor:e-resize; font-size:0px; }
.TTLeftSplitter { border-left:1px solid #D8D8D8; }
.TTBright .TTLeftSplitter { border-left-color:#CACACA; }
.TTDim .TTLeftSplitter { border-left-color:#C2C2C2; }
.TTRightSplitter { border-right:1px solid #D8D8D8; }
.TTBright .TTRightSplitter { border-right-color:#CACACA; }
.TTDim .TTRightSplitter { border-right-color:#C2C2C2; }
.TTWide .TTLeftSplitter,.TTWide .TTRightSplitter { width:9px; }
.TTTouch .TTLeftSplitter,.TTTouch .TTRightSplitter { width:15px; background:linear-gradient(#D8D8D8,#D8D8D8) 5px 0px/5px 100% no-repeat; }
.TTHeadSplitter { }
.TTLow .TTHeadSplitter { }
.TTBodySplitter { }
.TTLow .TTBodySplitter { }
.TTFootSplitter { }
.TTScrollSplitter { }
.TTSplitterDisabled { cursor:default; background:white; }
.TTTouch .TTSplitterDisabled { background:none; }

/* -------------- Vertical scrollbar, <div> tag inside <td> tag ------------------ */

/* The vertical scrollbar is placed on right side to <td> tag in Head section and is spanned through Body section and inner Space rows to Foot section 
   It controls the border and space around the scrollbar. 
   @ Set border, padding and margin, optionally background.
*/
.TTVScroll { padding-top:0px; overflow:hidden; } 
.TTVScrollHeader { background:#56AEA7; border-bottom:1px solid #56AEA7; }
.TTVScrollTop,.TTVScrollBottom { background:#C5EBF0; border-right:1px solid #C5EBF0; }
.TTFF .TTVScrollTop,.TTFF .TTVScrollBottom { background:#F4F4F4; border-left:1px solid white; border-right:0px none; }
.TTVScrollCustom>.TTVScrollTop,.TTVScrollCustom>.TTVScrollBottom { background:white; border-right:0px none; }
.TTVScrollShort>.TTVScroll { background:#C5EBF0; }

/* -------------- Horizontal scrollbars, <div> tag inside <td> tag ------------------ */

/* ...Left (for <LefCols> left fixed columns), ...Mid (for <Cols> variable columns), ...Right (for <RightCols> right fixed columns)
   They control the border and space around the scrollbar. 
   @ Set border, padding and margin, optionally background.
   ...Resize versions are shown instead for resizable sections, when set <Cfg LeftWidth, MidWidth, RightWidth/> attributes and <Cfg SectionResizing='2'/>
   ...HScrollWide is shown instead of all the section scrollbars when set <Cfg WideHScroll='1'/>
   ...ScrollHidden is shown instead if the column section does not need to show scrollbar (but the other sections do)
   ...XScroll is shown in the horizontal scrollbars row in place of vertical scrollbar
*/
.TTHScrollLeft,.TTHScrollMid,.TTHScrollRight { padding-left:1px; padding-right:1px; overflow:hidden; }
.TTHScrollMid { border-left:1px solid #D8D8D8; border-right:1px solid #D8D8D8; }
.TTHScrollLeftResize,.TTHScrollRightResize,.TTHScrollMidLeftResize,.TTHScrollMidRightResize { background:#F4F4F4; overflow:hidden; }
.TTHScrollLeftResize { border-right:2px solid black; padding-left:1px; padding-right:5px; }
.TTTouch .TTHScrollLeftResize { padding-right:18px; }
.TTHScrollRightResize { border-left:2px solid black; padding-left:5px; padding-right:1px; }
.TTTouch .TTHScrollRightResize { padding-left:18px; }
.TTHScrollMidLeftResize { border-left:1px solid black; padding-left:5px; }
.TTTouch .TTHScrollMidLeftResize { padding-left:19px; }
.TTHScrollMidRightResize { border-right:1px solid black; padding-right:5px; }
.TTTouch .TTHScrollMidRightResize { padding-right:19px; }
.TTHScrollWide { padding-left:1px; padding-right:1px; overflow:hidden; }
.TTHScrollHidden { overflow:visible!important; background:#C5EBF0; }
.TTXScroll { background:#C5EBF0; cursor:default; margin-left:-2px; padding-right:2px; }
.TTRtl .TTXScroll { margin-left:0px; padding-right:0px; margin-right:-2px; padding-left:2px; }
.TTFF .TTHScrollHidden { background:#F4F4F4; border-top:1px solid white; margin-bottom:-1px; }
.TTFF .TTXScroll { background:#F4F4F4; }
.TTVScrollCustom4 *,.TTHScrollCustom4 * { border:0px none; padding:0px; width:0px; }

/* -------------- Special scrollbar setting for Safari and Chrome, <div> tag inside <td> tag ------------------ */

/* Added to vertical and horizontal scrollbar to force showing scrollbars in Safari and Chrome if they are automatically hidden
   @ Change here the scrollbars look; The scrollbars must be defined as permanently visible
   ! Note, here is no style prefix
*/
.GridHiddenScroll > div::-webkit-scrollbar { -webkit-appearance:none; width:11px; height:11px; } 
.GridHiddenScroll > div::-webkit-scrollbar-thumb { border-radius:8px; border:2px solid white; background-color:rgba(0,0,0,0.5); }

/* ------------------ Round corners ------------------ */

/* Used to render something above and below the grid, to simulate e.g. rounded corners with special effects compatible in all browsers */

/* ...Top is set to <div> tag rendered directly above ...MainTable with the same width as the table 
   ...Top0 to ...Top9 is set to up 10 <div> tags inside ...Top. The tag is not rendered if the class has not set height.
   ...TopSpace0 to ...TopSpace9 is added to ...Top0 to ...Top9 in case there is some visible Space row width Space = 0
*/
.TTTop { }
.TTTop1 { }
.TTTop2 { }
.TTTop3 { }
.TTTop4 { }
.TTTop5 { }

/* ...Bottom is set to <div> tag rendered directly below ...MainTable with the same width as the table 
   ...Bottom0 to ...Top9 is set to up 10 <div> tags inside ...Top. The tag is not rendered if the class has not set height.
   ...BottomSpace0 to ...BottomSpace9 is added to ...Bottom0 to ...Bottom9 in case there is some visible Space row width Space = 4
*/
.TTBottom { }
.TTBottom5 { }
.TTBottom4 { }
.TTBottom3 { }
.TTBottom2 { }
.TTBottom1 { }

/* -------------- Row pages, <div> tag ------------------ */

/* They control the border and space around the row page */
/* @ Set here vertical border, padding and margin.
   ...PageOne is shown if no root paging is set (<Cfg Paging='0'/>. 
   ...PageFirst is the first root page, the ...Page are all the next root pages
   ...ChildPart is shown around the row children, regardless on the <Cfg ChildParts/> is set or not
   ...Border is added to all the classes for DynamicBorder, e.g. .TTPageBorder is used instead of .TTPage
*/
.TTPageFirst { }
.TTPage { }
.TTPageOne { }
.TTChildPart { }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                  Default scrollbars                                                           */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* IE */
.TTMain * { scrollbar-face-color:#166785; scrollbar-highlight-color:#C5EBF0; scrollbar-shadow-color:#AED6DE; scrollbar-arrow-color:#166785; }

/* Webkit */
.TTMain *::-webkit-scrollbar { width:17px; height:17px; background:#C5EBF0; }
.TTMain *::-webkit-scrollbar-button { width:17px; height:17px; }
.TTMain *::-webkit-scrollbar-button:vertical:start { background:#166785 url(ScrollUp.svg) center 1px no-repeat; }
.TTMain *::-webkit-scrollbar-button:vertical:end { background:#166785 url(ScrollDown.svg) center bottom no-repeat; }
.TTMain *::-webkit-scrollbar-button:horizontal:start { background:#166785 url(ScrollLeft.svg) center center no-repeat; }
.TTMain *::-webkit-scrollbar-button:horizontal:end { background:#166785 url(ScrollRight.svg) center center no-repeat; }
.TTMain *::-webkit-scrollbar-thumb:vertical { width:17px; background:#166785; border-top:1px solid #AED6DE; border-bottom:1px solid #AED6DE; }
.TTMain *::-webkit-scrollbar-thumb:horizontal { height:17px; background:#166785; border-left:1px solid #AED6DE; border-right:1px solid #AED6DE; }
.TTMain *::-webkit-scrollbar-track-piece:vertical { border-left:1px solid #AED6DE; border-right:1px solid #AED6DE; }
.TTMain *::-webkit-scrollbar-track-piece:horizontal { border-top:1px solid #AED6DE; border-bottom:1px solid #AED6DE; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                  Custom scrollbars                                                            */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Custom scrollbars shown if set CustomScroll (always) or CustomHScroll (for horizontal scrollbar only) or TouchScroll (on tablet only)
   There are four scrollbar types for CustomScroll values 1 - 4 for different sizes, 1 - standard size, 2 - wide scrollbar, 3 - thin scrollbar, 4 - hidden scrollbar
*/

/* --- Horizontal scrollbars --- */

/* ...RightHidden - shown instead of ...Right if the column section does not need to show scrollbar (but the other sections do) 
      It is used also to calculate scrollbar height; @ Set height and background and optionally border and margin
   ...Right - <div> tag placed inside ...HScroll... tag to show the right side arrow button; @ Set padding-right and background and optionally border, padding and margin
   ...RightHover - used instead of ...Right under mouse cursor, to highlight the right side button
   ...Left - <div> tag placed inside ...Right to show the left side arrow button; @ Set padding-left and background
   ...LeftHover - used instead of ...Left under mouse cursor, to highlight the left side button
   ...SliderRight - <div> tag placed inside ...Left... tag to show the right edge of the slider; @ Set padding-right and background and optionally border, padding and margin
   ...SliderRightHover - used instead of ...SliderRight under mouse cursor, to highlight the right edge of the slider
   ...SliderLeft - <div> tag placed inside ...SliderRight to show the left edge of the slider; @ Set padding-left and background
   ...SliderLeftHover - used instead of ...SliderLeft under mouse cursor, to highlight the left edge of the slider
   ...SliderHIn - <div> tag placed inside ...SliderLeft to show the body of the slider; Controls height of the whole scrollbar; 
      @ Set height and background; The height must be height of ...RightHidden minus all vertical padding,border and margin of the ...Right, ...Left, ...SliderRight, ...SliderLeft and ...SliderHIn
   ...SliderHInHover - used instead of ...SliderHIn under mouse cursor, to highlight the body of the slider
   ...X - shown in the horizontal scrollbars row in place of vertical scrollbar; @ Set background
*/
.TTCustScroll1RightHidden,.TTCustScroll2RightHidden { background:white; height:17px; }
.TTCustScroll2RightHidden { height:29px; }
.TTCustScroll1Right,.TTCustScroll1RightHover,.TTCustScroll2Right,.TTCustScroll2RightHover { background:#166785 url(ScrollRight.svg?v120) right 1px center no-repeat; background-size:15px 15px; height:17px; padding-right:17px; }
.TTCustScroll2Right,.TTCustScroll2RightHover { background-size:24px 24px; background-position:right 3px center; height:31px; padding-right:31px; }
.TTCustScroll1Left,.TTCustScroll1LeftHover,.TTCustScroll2Left,.TTCustScroll2LeftHover { background:#166785 url(ScrollLeft.svg?v120) 1px center no-repeat; background-size:15px 15px; height:17px; padding-left:17px; }
.TTCustScroll2Left,.TTCustScroll2LeftHover { background-size:24px 24px; background-position:3px center; height:31px; padding-left:31px; }
.TTCustScroll1RightHover,.TTCustScroll1LeftHover,.TTCustScroll2RightHover,.TTCustScroll2LeftHover { background-color:#338888; }
.TTCustScroll1Left > div,.TTCustScroll1LeftHover > div,.TTCustScroll2Left > div,.TTCustScroll2LeftHover > div { background:#C5EBF0; border-top:1px solid #AED6DE; border-bottom:1px solid #AED6DE; }
.TTCustScroll1Left > div > div,.TTCustScroll1LeftHover > div > div,.TTCustScroll2Left > div > div,.TTCustScroll2LeftHover > div > div { margin:-1px 0px -1px 0px; }
.TTCustScroll1SliderRight,.TTCustScroll1SliderLeft,.TTCustScroll2SliderRight,.TTCustScroll2SliderLeft { }
.TTCustScroll1SliderRightHover,.TTCustScroll1SliderLeftHover,.TTCustScroll2SliderRightHover,.TTCustScroll2SliderLeftHover { }
.TTCustScroll1SliderHIn,.TTCustScroll2SliderHIn { height:17px; overflow:hidden; background:#166785; margin:0px 1px 0px 1px; }
.TTCustScroll2SliderHIn { height:31px; }
.TTCustScroll1SliderHInHover,.TTCustScroll2SliderHInHover { height:17px; overflow:hidden; background:#338888; margin:0px 1px 0px 1px; }
.TTCustScroll2SliderHInHover { height:31px; }
.TTCustScroll1X,.TTCustScroll2X { background:white; cursor:default; }

.TTCustScroll3Right,.TTCustScroll3RightHidden { background:white; height:9px; }
.TTCustScroll3SliderRight,.TTCustScroll3SliderLeft { margin:1px; background:#166785; border-radius:5px; height:7px; }
.TTCustScroll3SliderRightHover,.TTCustScroll3SliderLeftHover { margin:1px; background:#338888; border-radius:5px; height:7px; }
.TTCustScroll3X { background:white; cursor:default; }

.TTSoft .TTCustScroll1RightHidden,.TTSoft .TTCustScroll2RightHidden,.TTSoft .TTCustScroll3Right,.TTSoft .TTCustScroll3RightHidden,.TTSoft .TTCustScroll1X,.TTSoft .TTCustScroll2X,.TTSoft .TTCustScroll3X { background-color:#F2F2F2; }
.TTDim .TTCustScroll1RightHidden,.TTDim .TTCustScroll2RightHidden,.TTDim .TTCustScroll3Right,.TTDim .TTCustScroll3RightHidden,.TTDim .TTCustScroll1X,.TTDim .TTCustScroll2X,.TTDim .TTCustScroll3X { background-color:#EAEAEA; }

.TTCustScroll4Right,.TTCustScroll4RightHidden,.TTCustScroll4SliderRight,.TTCustScroll4SliderRightHover { height:2px; margin-bottom:-2px; }
.TTCustScroll4X { }

/* --- Vertical scrollbars --- */

/* ...DownHidden - shown instead of ...Down if the grid does not need to show scrollbar and ShowVScroll='1' is set 
      It is used also to calculate scrollbar width; @ Set width and background and optionally border and margin
   ...Down - <div> tag placed inside ...VScroll tag to show the bottom side arrow button; @ Set padding-bottom and background and optionally border, padding and margin
   ...DownHover - used instead of ...Down under mouse cursor, to highlight the bottom side button
   ...Up - <div> tag placed inside ...Down to show the top side arrow button; @ Set padding-top and background
   ...UpHover - used instead of ...Up under mouse cursor, to highlight the top side button
   ...SliderDown - <div> tag placed inside ...Up... tag to show the bottom edge of the slider; @ Set padding-bottom and background and optionally border, padding and margin
   ...SliderDownHover - used instead of ...SliderDown under mouse cursor, to highlight the bottom edge of the slider
   ...SliderUp - <div> tag placed inside ...SliderDown to show the top edge of the slider; @ Set padding-top and background
   ...SliderUpHover - used instead of ...SliderUp under mouse cursor, to highlight the top edge of the slider
   ...SliderVIn - <div> tag placed inside ...SliderUp to show the body of the slider; @ Set background
   ...SliderVInHover - used instead of ...SliderVIn under mouse cursor, to highlight the body of the slider
*/
.TTCustScroll1DownHidden,.TTCustScroll2DownHidden { background:white; width:17px; border-left:1px solid #DAE5E9; border-right:1px solid white; }
.TTCustScroll2DownHidden { width:29px; }
.TTCustScroll1Down,.TTCustScroll1DownHover,.TTCustScroll2Down,.TTCustScroll2DownHover { background:#166785 url(ScrollDown.svg?v120) center bottom 1px no-repeat; background-size:15px 15px; width:17px; padding-bottom:17px; }
.TTCustScroll2Down,.TTCustScroll2DownHover { background-size:24px 24px; background-position:center bottom 3px; width:31px; padding-bottom:31px; }
.TTCustScroll1Up,.TTCustScroll1UpHover,.TTCustScroll2Up,.TTCustScroll2UpHover { background:#166785 url(ScrollUp.svg?v120) center 1px no-repeat; background-size:15px 15px; width:17px; padding-top:17px; }
.TTCustScroll2Up,.TTCustScroll2UpHover { background-size:24px 24px; background-position:center 3px; width:31px; padding-top:31px; }
.TTCustScroll1DownHover,.TTCustScroll1UpHover,.TTCustScroll2DownHover,.TTCustScroll2UpHover { background-color:#338888; }
.TTCustScroll1Up > div,.TTCustScroll1UpHover > div,.TTCustScroll2Up > div,.TTCustScroll2UpHover > div { background:#C5EBF0; border-left:1px solid #AED6DE; border-right:1px solid #AED6DE; }
.TTCustScroll1Up > div > div,.TTCustScroll1UpHover > div > div,.TTCustScroll2Up > div > div,.TTCustScroll2UpHover > div > div { margin:0px -1px 0px -1px; width:17px!important; overflow:hidden; }
.TTCustScroll2Up > div > div,.TTCustScroll2UpHover > div > div { width:31px!important; }
.TTCustScroll1SliderDown,.TTCustScroll1SliderUp,.TTCustScroll2SliderDown,.TTCustScroll2SliderUp { }
.TTCustScroll1SliderDownHover,.TTCustScroll2SliderUpHover,.TTCustScroll2SliderDownHover,.TTCustScroll2SliderUpHover { }
.TTCustScroll1SliderUp,.TTCustScroll2SliderUp { padding-bottom:1px; }
.TTCustScroll1SliderVIn,.TTCustScroll2SliderVIn { background:#166785; margin:1px 0px 1px 0px; }
.TTCustScroll1SliderVInHover,.TTCustScroll2SliderVInHover { background:#338888; margin:1px 0px 1px 0px; }

.TTCustScroll3Down,.TTCustScroll3DownHidden { background:white; width:8px; }
.TTCustScroll3SliderDown,.TTCustScroll3SliderUp { margin:0px 1px 0px 1px; background:#166785; border-radius:5px; }
.TTCustScroll3SliderDownHover,.TTCustScroll3SliderUpHover { margin:0px 1px 0px 1px; background:#338888; border-radius:5px; }

.TTSoft .TTCustScroll3Down,.TTSoft .TTCustScroll3DownHidden { background-color:#F2F2F2; }
.TTDim .TTCustScroll3Down,.TTDim .TTCustScroll3DownHidden { background-color:#EAEAEA; }

.TTCustScroll4Down,.TTCustScroll4DownHidden,.TTCustScroll4SliderDown,.TTCustScroll4SliderDownHover { width:2px; margin-right:-2px; }

















/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* -------------------------------------------------------------------------------------------------------------------------- */

/*                                                        3) ALL GRID DEFINITIONS                                                */

/* -------------------------------------------------------------------------------------------------------------------------- */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 
   Contains full definition of all TreeGrid CSS classes, except the ones defined in 2) GRID SECTIONS AND SCROLLBARS. 
   Can be hardly customized, only for precise changes.
   In the description, the sentence starting by "@" lists what only should be changed in the CSS class
*/



/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                         Grid base                                                             */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------- Group definition for all TreeGrid tags ------------- */
/* ! Note, here is no style prefix, it is shared among all TreeGrid styles 
   @ Set here default values for CSS attributes of tags <td>, <th>, <tr>, <table>, <tbody>, <div>, <span>, <u>, <button>, <input>, <textarea>
   if your global style sheet redefined them, especially attributes controlling size and measurement, otherwise TreeGrid will be switched to Safe CSS mode 
*/
.GridMain * { -webkit-box-sizing:content-box!important; -moz-box-sizing:content-box!important; box-sizing:content-box!important; }
.GridMain input { height:inherit; }
.GridMain button,.GridMain input[type="button"] { height:auto; }


/* ------------- Base tags ------------- */

/* @ Do not change.
   FF3 version is used for Firefox 3 - 19 due its slow bug in rendering table cells with different borders 
*/
.TTNone { display:none; }
.TTSection,.TTSectionFF3 { table-layout:fixed; width:0px; line-height:0px; contain:paint; border-collapse:separate; }
.TTSectionFF3 { border-collapse:collapse; }
.TTSectionSpan { contain:none; }
.TTSection img { vertical-align:top; }
.TTSectionScroll::-webkit-scrollbar { display:none; }
.TTSectionScroll { scrollbar-width:none; }

/* -------------- Main TreeGrid <table> tag, contains the table sections ------------------ */

/* It controls border around the grid. @ Set margin, border and padding. */
.TTMainTable { border-collapse:separate; }
.TTRtl .TTMainTable { text-align:right; }




/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                             Rows                                                              */
/* -------------------------------------------------------------------------------------------------------------------------- */
 
/* ------------- Table rows, <tr> tag ------------------ */

/* Sets the class to the whole column section of the row. Useful to set for special backgrounds.
   ...DataRow is set for all standard table rows without Kind attribute set
   @ Set here only background
*/
.TTHeaderRow { }
.TTFilterRow { }
.TTDataRow { }

/* ------------- Space rows, <div> tag inside <td> tag ------------------ */

/* ...RowSpace is set for every space row tag <td>
   ...RowSpaceX is added for given Space attribute value (-1 to 5)
   ...RowSpaceFirst is added for the first visible space in its section
   ...RowSpaceLast is added for the last visible space in its section 
   ...SolidRow is set for every space row tag <div> inside <td> tag
   ...XXXRow is added according to the row Kind as prefix+Kind+"Row". In XML the Kind can be set as tag name like <Group ... />. Default Kind is "Space".
   Every Space row is placed in its own <tr><td><div> tag, on the same level as table sections like Head/Body/Foot (...Left/Mid/Right).
   @ Set here border, padding, margin and background
*/
.TTSolidRow { line-height:0px; overflow:hidden; white-space:nowrap; padding:2px 0px 2px 0px; }
.TTRowSpaceFirst { padding-top:5px; }
.TTRowSpaceLast { padding-bottom:5px; }
.TTRowSpaceFirst .TTSolidRow { padding-top:4px; }
.TTRowSpaceLast .TTSolidRow { padding-bottom:4px; }
.TTHigh .TTRowSpaceFirst .TTSolidRow { padding-top:8px; }
.TTHigh .TTRowSpaceLast .TTSolidRow { padding-bottom:8px; }
.TTBig .TTRowSpaceFirst .TTSolidRow { padding-top:12px; }
.TTBig .TTRowSpaceLast .TTSolidRow { padding-bottom:12px; }
.TTLow .TTRowSpaceFirst { padding-top:2px; }
.TTLow .TTRowSpaceLast { padding-bottom:2px; }
.TTTiny .TTSolidRow { padding-top:0px; padding-bottom:0px; }
.TTTiny .TTRowSpaceFirst .TTSolidRow { padding-top:0px; }
.TTTiny .TTRowSpaceLast .TTSolidRow { padding-bottom:0px; }
.TTRowSpaceFirst.TTRowSpace0 { padding-top:0px; }
.TTRowSpaceLast.TTRowSpace4 { padding-top:0px; }

.TTSpaceRow { }                                     /* Standard Space row with no special meaning */
.TTGroupRow { }                                     /* Grouping settings row */
.TTSearchRow { }                                    /* Search settings row */
.TTPagerRow { }                                     /* Simple pager row with Pages type cell */
.TTToolbarRow { }                                   /* Bottom standalone toolbar */
.TTToolbar1Row { }                                  /* First bottom toolbar */
.TTToolbar2Row { }                                  /* Last bottom toolbar */
.TTToolbar3Row { }                                  /* Middle bottom toolbars */
.TTTopbarRow { margin-bottom:7px; }                 /* Standalone top toolbar */
.TTTopbar1Row { }                                   /* First top toolbar*/
.TTTopbar2Row { margin-bottom:7px; }                /* Last top toolbar */
.TTTopbar3Row { }                                   /* Middle top toolbars */
.TTTabberRow { padding:0px; }                       /* Tabber row with Tab type cells, usually used with ...RowAbove or ...RowBelow */

/* Special Space row Kind="Fill" shown for ConstHeight='1'*/
.TTFillRow { }

/* Special Space row Kind="NoData" shown when all body rows are hidden */
.TTNoDataRow { margin-top:5px; padding:5px 0px 5px 5px; overflow:hidden; }
.TTNoDataRow div { }

/* Class added to Space row Kind class for its position (Space attribute value), only value 0 to 4 */
.TTRowSpace0 { }
.TTRowSpace1 { }
.TTRowSpace2 { }
.TTRowSpace3 { }
.TTRowSpace4 { }

/* Special Space row above or below grid, used instead of Kind class, ...RowAbove is added for Space='-1', ...RowBelow for Space='5' */
.TTRowAbove,.TTRowBelow { margin-left:20px; margin-right:20px; overflow:hidden; }
.TTRowAbove { margin-top:3px; }
.TTRowBelow { margin-bottom:3px; }
.TTTiny .TTRowAbove,.TTTiny .TTRowBelow { margin-left:2px; margin-right:2px; }

/* Class added for row with Panel='1' */
.TTSpaceRowPanel { padding-left:0px; }

/* Class added for given row VAlign attribute value */
.TTSpaceVAlignTop { }
.TTSpaceVAlignMiddle { }
.TTSpaceVAlignBottom { }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                            Cells                                                              */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------- Table cells, <td> tag ------------- */

/* Classes for table row cells (not Space rows). Always one class per one cell.
   @ Set border here. Note, all cells in table must have the same border width/height in the same cell edge.
   @ You can set also padding here, but note, the padding is defined also in cell type class.
   @ You can set also background here, but note, the data cell background color is often controlled by ...Color state classes
   ...CellBase - every cell except space cells.
   ...Cell - standard data cell
   ...CellPanel - cell Type="Panel"
   ...CellFilter - cell in row Kind="Filter"
   ...CellFilterPanel - cell Name="Panel" in row Kind="Filter". Note, it is used only for default panel named "Panel"
   ...CellHeader - cell in row Kind="Header"
   ...CellHeaderPanel - cell Type="Panel" in row Kind="Header"
   ...CellEmpty - cell in _ConstWidth column (created due <Cfg ConstWidth/> setting), also in row Kind="Filter"
   ...CellHeaderEmpty - cell in _ConstWidth column (created due <Cfg ConstWidth/> setting) in row Kind="Header"
   ...CellUser - user cell section defined by <I LeftHtml MidHtml RightHtml/>
   ...CellHidden - cell in child row hidden due spanned parent row through its children
   ...CellHHidden - cell hidden due RowSpan when the main row is printed on previous page
   ...CellIndex - cell in column RowIndex
*/
.TTCellBase { vertical-align:middle; overflow:hidden; height:auto; }
.TTCell { }
.TTCellHeader { }
.TTCellHeaderPanel { }
.TTCellHeaderEmpty { }
.TTVAlignTop.TTCellHeader { background-position-y:0px; }
.TTCellIndex { }
.TTCellIndexEmpty { }
.TTCellIndexPanel { }
.TTCellIndexAlternate { }
.TTIndexSmall { margin-top:-8px; margin-bottom:-50px; }
.TTCellIndexNarrow { vertical-align:middle!important; }
.TTWide .TTIndexSmall { margin-top:-10px; }
.TTGiant .TTIndexSmall { margin-top:-12px; }
.TTCellFilter { }
.TTCellPanel,.TTCellHeaderPanel,.TTCellFilterPanel,.TTCellIndexPanel,.TTCellRowPanel { white-space:nowrap; direction:ltr; line-height:0px; text-overflow:clip; }
.TTCellPanel,.TTCellHeaderPanel { padding-left:6px; padding-right:5px; }
.TTRtl .TTCellPanel,.TTRtl .TTCellHeaderPanel,.TTRtl .TTCellIndexPanel,.TTRtl .TTCellRowPanel { text-align:right; }
.TTLow .TTCellPanel,.TTLow .TTCellHeaderPanel { padding-left:1px; padding-right:2px; }
.TTCellFilterPanel { text-align:center; }
.TTCellRowPanel { }
.TTCellUser { }
.TTCellEmpty { background:white; border-bottom-color:white; }
.TTSoft .TTCellEmpty { background-color:#F2F2F2; border-bottom-color:#F2F2F2; }
.TTDim .TTCellEmpty { background-color:#EAEAEA; border-bottom-color:#EAEAEA; }
.TTCellHidden { background:transparent!important; border:none!important; }
.TTCellHHidden { background:transparent!important; border-top:none!important; border-bottom:none!important; }
.TTCellHHiddenFirst { background:transparent!important; border-bottom:none!important; }
.TTCellHHiddenLast { background:transparent!important; border-top:none!important; }
.TTCellHHiddenFirstLast { background:transparent!important; }

/* Special class added to every cell except panel, filter and header for DynamicBorder. @ Do not change. */
.TTCellBorder,.TTCellHeaderBorder,.TTCellNoBorder { border-left:2px solid transparent; border-top:2px solid transparent; border-bottom:1px solid transparent; }
.TTCellIndexBorder { border-left:2px solid transparent; }
.TTCellHeaderBorder { }
.TTCellNoBorder { border-color:transparent; }

/* Special class to choose if the last cells in column or row section will render its border; Not used in grid, only border width is read; @ Set border-right and border-bottom; set it to 0px to SHOW the border */
.TTLastCell { }

/* Classes added to the <td> cell due special feature
   ...CellClassInner added to the cell with defined ClassInner attribute (including Header cell)
   ...CellClassInnerIcon added to the cell with defined ClassInner attribute and side Icon
   ...CellHeaderInnerIcon added to the header cell with defined ClassInner attribute and side Icon
   ...CellBorderFF3 is added to all cells in Firefox 3 - 19 due its slow bug in rendering table cells with different borders
*/
.TTCellClassInner { padding-top:0px; padding-bottom:0px; }
.TTCellClassInnerIcon { }
.TTCellHeaderInnerIcon { }
.TTCellBorderFF3 { border-left:0px none!important; border-top:0px none!important; }

/* --- Gantt type cell --- */
.TTGantt { padding:0px!important; cursor:default; background:transparent!important; -webkit-user-select:none; -moz-user-select:none; vertical-align:top!important; }
.TTGanttNoBorder { border-top:0px none!important; border-bottom:0px none!important; }

/* ------------- Cell content - Type, <td> or <div> tag ------------- */

/* The Type class is by default set to same <td> tag as the table cell or Space cell class.
   Here are listed all TreeGrid Types except: "Gantt" - defined in Gantt.css file; "Chart", "Pages" and "DropCols" - defined later in this file and "Panel" - this class is not used.
   If the cell consists from more included <div> tags, it is set to the most inner <div> tag.
   The one or more <div> tags are included in cell if: 
      any cell has set VAlign, Rotate or ClassInner or Align="Scroll"
      Header cell has set Icon or Type="Bool"
      Space cell has set Icon or is editable or has Button="Defaults"
   There can be included also inner <table> inside cell in these cases:
      any cell has set Span + Merge with more columns and no MergeFormat
      Header cell has set Levels
      MainCol cell when set <Cfg SpannedTree='1'/>
      DropCols and Radio types use also inner <Table>, but the Type class is set to parent cell
   Select type class is set along with Html class for Select Type
   Note, the "Bool", "Icon" and "Select" type classes are not listed in the first line
   @ Set padding and text attributes like font, line-height, text-align, white-space
*/
.TTType { padding:7px 10px 7px 10px; white-space:nowrap; }
.TTNoRight.TTType,.TTNoRight .TTType { padding-right:2px; }
.TTRtl .TTNoLeft.TTType,.TTRtl .TTNoLeft .TTType { padding-left:2px; }
.TTWide .TTType { padding-top:5px; padding-bottom:5px; }
.TTHigh .TTType { padding-top:10px; padding-bottom:10px; }
.TTBig .TTType { padding-top:15px; padding-bottom:15px; }
.TTGiant .TTType { padding-top:12px; padding-bottom:14px; }
.TTLow .TTType { padding:4px 3px 5px 3px; }
.TTLow .TTNoRight,.TTLow .TTNoRight .TTType { padding-right:0px; }
.TTRtl.TTLow .TTNoLeft.TTType,.TTRtl.TTLow .TTNoLeft .TTType { padding-left:0px; }
.TTSmall .TTType { padding-top:2px; padding-bottom:2px; }
.TTMini .TTDataRow .TTType { padding-top:0px; padding-bottom:1px; }
.TTMini .TTDataRow .TTRadio,.TTMini .TTDataRow .TTButton,.TTMini .TTDataRow .TTImg,.TTMini .TTDataRow .TTHtml,.TTMini .TTDataRow .TTBool,.TTMini .TTDataRow .TTAbs,.TTMini .TTDataRow .TTUser { padding-bottom:0px; }
.TTLow .TTButton { padding-left:5px; padding-right:5px; }
.TTSmall .TTButton { padding-top:0px; padding-bottom:0px; }
.TTInt,.TTFloat,.TTDate { text-align:right; }
.TTLines,.TTRadio,.TTHtml,.TTList,.TTEHtml { white-space:normal; }	
.TTWordWrap .TTLines,.TTWordWrap .TTRadio,.TTWordWrap .TTHtml,.TTWordWrap .TTList,.TTWordWrap .TTEHtml { word-wrap:break-word; overflow-wrap:break-word; }
.TTMain .TTImg,.TTMain .TTHtml { padding-top:0px; padding-bottom:0px; }
.TTEHtml img,.TTAuto img { vertical-align:baseline; }
.TTIE .TTEHtml img,.TTIE .TTAuto img { pointer-events:none; }
.TTPass { font-size:16px; }
.TTMain .TTRadio { padding-left:5px;padding-right:5px; }
.TTBool { text-align:center; line-height:0px; }
.TTMain .TTBool { padding:0px 5px 0px 5px; }
.TTLow .TTBool { padding-left:1px; padding-right:1px; }
.TTWide .TTBool { padding-left:7px; padding-right:7px; }
.TTBig .TTBool { padding-left:10px; padding-right:10px; }
.TTMain .TTIcon { background-repeat:no-repeat; background-size:auto; }
.TTAbs { padding:0px; vertical-align:top!important; }
.TTUser { padding:0px; }
.TTSelect { }

/* Class for inner RowIndex column */
.TTIndexText { text-align:center; }
.TTMain .TTIndexText { padding:4px 1px 4px 1px; }
.TTWide .TTIndexText { padding-top:1px; padding-bottom:1px; }
.TTHigh .TTIndexText { padding-top:0px; padding-bottom:2px; }
.TTBig .TTIndexText { padding-top:11px; padding-bottom:11px; }
.TTGiant .TTIndexText { padding-top:7px; padding-bottom:7px; }
.TTLow .TTIndexText { padding-top:2px; padding-bottom:3px; }
.TTSmall .TTIndexText { padding-top:0px; padding-bottom:0px; }
.TTMini .TTDataRow .TTIndexText { line-height:16px; }

/* Class set for cell width Visible='0'.
   @ Set background for the ...Hidden
   It is always set to <td> tag, this tag has always empty content. 
   ...Hidden is set to table cell and does not hide the cell, it just makes it empty
   ...HiddenSpace is set to Space cell and hides the cell completely
   ...HiddenValue is set to <td> tag when editing, to hide the cell value under edit
*/
.TTHidden { }
.TTHiddenSpace { display:none; }
.TTHiddenValue,.TTHiddenValue * { color:transparent!important; } 

/* Classes for text and floating images. @ Set background and outline for HoverImg and background for CellImg */
.TTFloatImg { position:absolute; left:0px; top:0px; cursor:move; z-index:1; }
.TTCutImg img { vertical-align:middle; margin-bottom:-1000px; margin-top:-1000px; }
.TTMain img.TTFloatImg { vertical-align:auto; margin:0px; pointer-events:auto; }
.TTCellImg { position:relative; background-image:url(CellImg.svg); background-size:7px 7px; background-repeat:no-repeat; }
.TTRtl .TTCellImg { background-image:url(CellImgRtl.svg); background-position:right 2px top 0px; }
.TTCellOverlayImg { overflow:visible!important; }
.TTCellOverlayImgEdit .TTFloatImg { display:none; }
.TTHoverImg { background-color:rgba(255,102,0,0.1); outline:1px solid #6EBCB6; outline-offset:1px; }

/* Classes set for Overlay. @ Do not change */
.TTMain .TTOverflowVisible,.TTMain .TTOverflowLeftVisible { overflow:visible; }
.TTMain .TTOverflowLeftVisible>div,.TTMain .TTOverflowLeft>div { float:right; }
.TTMain .TTOverflowVisibleCenter>div { margin-left:-10000px; margin-right:-10000px; float:none; text-align:center; }
.TTHintOuter.TTOverflowVisibleCenter>div { margin-left:0px; margin-right:0px; }
.TTMain .TTOverflowVisibleCenter>div>div { display:inline-block; }
.TTMain .TTOverflowWrap>div { white-space:normal; word-wrap:normal; overflow-wrap:normal; }
.TTWordWrap .TTOverflowWrap>div { word-wrap:break-word; overflow-wrap:break-word; }
.TTMain .TTOverflowDisable,.TTMain .TTOverflowEmptyDisable { background-color:white; position:relative; }
.TTSoft .TTOverflowDisable,.TTSoft .TTOverflowEmptyDisable { background-color:#F2F2F2; }
.TTDim .TTOverflowDisable,.TTDim .TTOverflowEmptyDisable { background-color:#EAEAEA; }
.TTMain [rowspan].TTOverflowVisible *,.TTMain [rowspan].TTOverflowLeftVisible * { pointer-events:none; }
.TTMain [rowspan].TTOverflowVisible img,.TTMain [rowspan].TTOverflowLeftVisible img { pointer-events:auto; }
div.TTOverlayImg { padding:0px!important; vertical-align:top; margin-bottom:-2000px; pointer-events:none; float:left; }
.TTDB div.TTOverlayImg { margin-top:-2px; margin-left:-2px; }

/* Class set to the right Button cell, the table cell next to the data cell:
   @ Set width, height, padding and text attributes like font, line-height, text-align, white-space
   ...RightButton is set for <button> or <u> tag inside <td> tag for Button="Button" according to <Cfg UseButton>
   ...RightHtml is set for <td> tag for Button="Html"
*/
button.TTRightButton { padding:1px 2px 1px 2px; margin-top:5px; margin-bottom:5px; line-height:14px; box-sizing:border-box!important; color:#093F51; }
.TTWide button.TTRightButton { margin-top:2px; margin-bottom:2px; line-height:inherit; }
.TTHigh button.TTRightButton { margin-top:7px; margin-bottom:7px; }
.TTBig button.TTRightButton { margin-top:12px; margin-bottom:12px; }
.TTGiant button.TTRightButton { margin-top:10px; margin-bottom:10px; }
.TTLow button.TTRightButton { margin-top:3px; margin-bottom:2px; }
.TTSmall button.TTRightButton { margin-top:1px; margin-bottom:1px; padding-top:0px; padding-bottom:0px; }
.TTMini .TTDataRow button.TTRightButton { line-height:11px; }

u.TTRightButton { padding:0px 3px 0px 3px; margin:6px 1px 6px 1px; text-decoration:none; display:block; overflow:hidden; white-space:nowrap; }
.TTWide u.TTRightButton { margin-top:4px; margin-bottom:4px; }
.TTHigh u.TTRightButton { margin-top:9px; margin-bottom:9px; }
.TTBig u.TTRightButton { margin-top:12px; margin-bottom:12px; padding-top:2px; padding-bottom:2px; }
.TTGiant u.TTRightButton { padding-top:0px; padding-bottom:0px; }
.TTLow u.TTRightButton { margin-top:4px; margin-bottom:3px; }
.TTSmall u.TTRightButton { margin-top:2px; margin-bottom:2px; line-height:14px; }
.TTMini .TTDataRow u.TTRightButton { margin-top:1px; margin-bottom:1px; line-height:13px; }

.TTMain .TTRightHtml { padding-top:7px; padding-bottom:7px; color:inherit; }
.TTWide .TTRightHtml { padding-top:5px; padding-bottom:5px; }
.TTHigh .TTRightHtml { padding-top:10px; padding-bottom:10px; }
.TTBig .TTRightHtml { padding-top:15px; padding-bottom:15px; }
.TTGiant .TTRightHtml { padding-top:13px; padding-bottom:13px; }
.TTLow .TTRightHtml { padding-top:5px; padding-bottom:4px; }
.TTSmall .TTRightHtml { padding-top:2px; padding-bottom:2px; }
.TTMini .TTDataRow .TTRightHtml { padding-top:1px; padding-bottom:0px; }

/* Class set to inner table <td> tag, when displaying Header cell Levels
   @ Set width and text attributes like font, line-height, text-align, white-space for the ...LevelButton
   ...LevelButton is set to every Levels button
   ...LevelButtonSpace is set to the next <td> as the space between buttons and cell value. The last <td> cell contains the cell value
*/
.TTLevels { padding-left:6px; }
.TTWide .TTLevels { padding-left:7px; }
.TTLow .TTLevels { padding-left:3px; }
.TTLevelsDB { padding-left:8px; }
.TTWide .TTLevelsDB { padding-left:9px; }
.TTLow .TTLevelsDB { padding-left:5px; }
.TTLevels>table { width:100%; }
.TTLevelButton { width:24px; background:url(SideLevels.svg?v120) 2px center no-repeat; background-size:20px 16px; text-align:center!important; cursor:pointer; }
.TTWide .TTLevelButton { width:32px; background-position:4px center; background-size:24px 20px; }
.TTBig .TTLevelButton { background-size:24px 22px; }
.TTLow .TTLevelButton { width:16px; background-position:1px center; background-size:15px 15px; font-size:10.5px; }
.TTSmall .TTLevelButton { } 
.TTVAlignTop .TTLevelButton { padding-top:8px; background-position-y:6px; vertical-align:top; }
.TTVAlignBottom .TTLevelButton { padding-bottom:8px; background-position-y:calc(100% - 6px); vertical-align:bottom; }
.TTWide .TTVAlignTop .TTLevelButton { padding-top:5px; background-position-y:3px; }
.TTWide .TTVAlignBottom .TTLevelButton { padding-bottom:5px; background-position-y:calc(100% - 3px); }
.TTHigh .TTVAlignTop .TTLevelButton { padding-top:10px; background-position-y:8px; }
.TTHigh .TTVAlignBottom .TTLevelButton { padding-bottom:10px; background-position-y:calc(100% - 8px); }
.TTBig .TTVAlignTop .TTLevelButton { padding-top:15px; background-position-y:13px; }
.TTBig .TTVAlignBottom .TTLevelButton { padding-bottom:15px; background-position-y:calc(100% - 13px); }
.TTGiant .TTVAlignTop .TTLevelButton { padding-top:13px; }
.TTGiant .TTVAlignBottom .TTLevelButton { padding-bottom:13px; }
.TTLow .TTVAlignTop .TTLevelButton { padding-top:5px; background-position-y:5px; }
.TTLow .TTVAlignBottom .TTLevelButton { padding-bottom:5px; background-position-y:calc(100% - 5px); }
.TTSmall .TTVAlignTop .TTLevelButton { padding-top:2px; background-position-y:2px; }
.TTSmall .TTVAlignBottom .TTLevelButton { padding-bottom:2px; background-position-y:calc(100% - 2px); }
.TTLevelButtonSpace { width:5px; }
.TTLevelRight.TTLevelButton { padding:0px 2px 0px 0px; color:white; background-position:right 4px center; }
.TTBig .TTLevelRight.TTLevelButton { padding-right:0px; color:white; background-position:center center; }
.TTLow .TTLevelRight.TTLevelButton { padding-right:5px; background-position:right 5px center; line-height:12px; }
.TTTiny .TTLevelRight.TTLevelButton { background-size:15px 14px; }

/* Class set to inner table <td> tag, when displaying merged cells (Span+Merge and no MergeFormat) 
   @ Set border, padding, background, width and height
   ...MergedCellH is set to every merged value (<td> tag) when showing all cells in one row (MergeType&1 = 0)
   ...MergedCellV is set to every merged value (<td> tag) when showing all cells in one column (MergeType&1 = 1)
*/
.TTMergedCellH { padding:0px; padding-right:5px; }
.TTMergedCellV { padding:0px; padding-bottom:1px; }

/* Classes set to cell in Header row
   ...HeaderText is set along with the Type class for Header cell, to <td> or <div> tag. @ Set padding and text attributes like font, line-height, text-align, white-space
   ...HeaderIconInner is set along with the ...HeaderText if the cell has set Icon, to <td> or <div> tag. @ Set padding.
   ...HeaderButton is set to <td> tag next to the cell if the cell has set Button (by default Header cell has set Button="Sort"). @ Set padding or the first child <button> settings.
   ...HeaderToolButton is set to <td> tag of the cell type "Button" and Button="Button". @ Set padding
   ...HeaderFocus is added to cell <td> tag during dragging the Header cell. @ Set background and optionally border, padding and text attributes like font, line-height, text-align, white-space
   ...HeaderDrag is added to ghost Header cell under mouse cursor during dragging the Header cell. @ Set background and border and optionally padding and text attributes like font, line-height, text-align, white-space
   ...HeaderResize is added to cell <td> (and to the next <td> if shown button) during resizing the column. @ Set background and optionally border, padding and text attributes like font, line-height, text-align, white-space
*/
.TTHeaderText { padding-top:4px; padding-bottom:4px; }
.TTWide .TTHeaderText { padding-top:1px; padding-bottom:1px; }
.TTHigh .TTHeaderText { padding-top:6px; padding-bottom:6px; }
.TTBig .TTHeaderText { padding-top:11px; padding-bottom:11px; }
.TTGiant .TTHeaderText { padding-top:7px; padding-bottom:7px; }
.TTLow .TTHeaderText { padding-top:2px; padding-bottom:3px; }
.TTSmall .TTHeaderText { padding-top:0px; padding-bottom:0px; }
.TTHeaderIconInner { }
.TTHeaderButton { }
.TTHeaderButtonButton { }
.TTMain .TTHeaderButtonHtml { color:white; }
.TTHeaderToolButton { }
.TTHeaderFocus { }
.TTHeaderDrag { cursor:default; overflow:hidden; }
.TTHeaderResize { border-right:2px solid white; }

/* Classes added to DropCols type inner table cells, <td> tag. 
   @ Set here border, padding, background and text attributes.
   ...DropCols is DropCols type class set to <td> tag
   ...HeaderGroup is set to every DropCols inner table cells, except the last one
   ...HeaderGroupFocus is added to the DropCols inner table cell during dragging inside the DropCols line (to be moved)
   ...HeaderGroupDelete is added to the DropCols inner table cell during dragging outside the DropCols line (to be removed)
   ...HeaderGroupCustom is set to the last cell in DropCols inner table, as the default text "To group by, drag column caption here"
*/
.TTDropCols { padding:1px 5px 1px 5px!important; }
.TTHeaderGroup { padding:4px 0px 4px 8px; background-clip:padding-box; overflow:hidden; }
.TTHeaderGroupFocus { }
.TTHeaderGroupDelete { }
.TTHeaderGroupCustom { padding:4px 0px 4px 5px; white-space:nowrap; }
.TTWide .TTHeaderGroup,.TTWide .TTHeaderGroupCustom { padding-top:2px; padding-bottom:2px; }
.TTHigh .TTHeaderGroup,.TTHigh .TTHeaderGroupCustom { padding-top:5px; padding-bottom:3px; }
.TTBig .TTHeaderGroup,.TTBig .TTHeaderGroupCustom { padding-top:7px; padding-bottom:5px; }
.TTLow .TTHeaderGroup,.TTLow .TTHeaderGroupCustom { padding-top:1px; padding-bottom:1px; }

/* Class added to the cell <td> tag when resizing row or column by dragging this cell edge and direct resizing is off */
.TTResizingRow { border-bottom:2px solid white; }
.TTResizingSpace { }

/* Class added as ClassInner in Filter row */
/* @ here especially set, change or remove the border, optionally the margin, padding and color */
.TTMain .TTFilterInner { margin:5px 11px 5px 11px; padding-top:2px; padding-bottom:2px; overflow:hidden; }
.TTWide .TTFilterInner { margin-top:3px; margin-bottom:3px; }
.TTHigh .TTFilterInner { padding-top:5px; padding-bottom:5px; margin-top:11px; margin-bottom:11px; }
.TTBig .TTFilterInner { padding-top:7px; padding-bottom:7px; margin-top:8px; margin-bottom:8px; }
.TTGiant .TTFilterInner { padding-top:5px; padding-bottom:5px; }
.TTLow .TTFilterInner { margin:4px 4px 4px 4px; padding-top:0px; padding-bottom:1px; }
.TTSmall .TTFilterInner { margin-top:2px; margin-bottom:1px;  }
.TTTiny .TTFilterInner { margin:0px; border:0px none; }

.TTCellRotate .TTFilterInner { margin:0px; border:0px none; }

/* Attribute Tags */
.TTTags { margin:-1px 0px -4px 0px; }
.TTTags span { display:inline-block; margin:0px 3px 3px 3px; padding:1px 4px; }
.TTTags .TTTagsEmpty { background:none; color:gray!important; font-style:italic; }
.TTSmall .TTTags { margin:0px 0px -2px 0px; }
.TTSmall .TTTags span { padding:0px 2px; margin:0px 2px 2px 2px; }
.TTMini .TTTags { margin:0px 0px -1px 0px; }
.TTMini .TTTags span { margin:0px 1px 1px 1px; }
.TTHigh .TTTags { margin:-5px 0px -6px 0px; }
.TTHigh .TTTags span { padding:3px 6px; margin:2px 5px 3px 5px; }
.TTTagsDelete span::after { content:""; padding-left:12px; background:url(TagDelete.svg) right top no-repeat; background-size:10px 10px; cursor:pointer; }
.TTTagsDelete .TTTagsEmpty::after { padding:0px; background:none; }
.TTSmall .TTTagsDelete span::after { background-position:right 1px; }

/*--------------- Space cells ----------------- */

/* Set to all Space cells
   @ Set here border, padding and background
*/
.TTCellSpaceBase { vertical-align:middle; }

/* Not editable Space cell. Set also for Label.
   ...CellSpace is set to the <td> tag
   ...CellSpaceIcon is set to <td> tag instead for cell with Icon attribute
   ...SpaceIconInner is set to inner <div> tag for cell with Icon attribute
*/
.TTCellSpace,.TTCellSpaceIcon { padding-left:10px; padding-right:10px; }
.TTLow .TTCellSpace,.TTLow .TTCellSpaceIcon { padding-left:6px; padding-right:6px; }
.TTTiny .TTCellSpace,.TTTiny .TTCellSpaceIcon { padding-left:3px; padding-right:3px; }
.TTWide .TTCellSpace,.TTWide .TTCellSpaceIcon { padding-left:15px; padding-right:15px; }
.TTCellSpace,.TTSpaceIconInner { padding-top:5px; padding-bottom:5px; }
.TTCellSpaceIcon { padding-top:0px; padding-bottom:0px; }
.TTSpaceIconInner > div { overflow:hidden; }
.TTWide .TTCellSpace,.TTWide .TTSpaceIconInner { padding-top:3px; padding-bottom:3px; }
.TTHigh .TTCellSpace,.TTHigh .TTSpaceIconInner { padding-top:6px; padding-bottom:4px; }
.TTBig .TTCellSpace,.TTBig .TTSpaceIconInner { padding-top:8px; padding-bottom:6px; }
.TTLow .TTCellSpace,.TTLow .TTSpaceIconInner { padding-top:2px; padding-bottom:2px; }
.TTCellSpaceEmpty { padding:0px; }

/* Button Type in Space cell
   ...CellSpaceButton is set to the <td> tag for cell with Button="Html"
   ...CellSpaceButtonIcon is set to the <td> tag instead for cell with Button="Html" and Icon attribute
   ...SpaceButtonIconInner is set to inner <div> tag for cell with Button="Html" and Icon attribute
   ...CellSpaceButtonButton is set to the <td> tag for cell with Button="Button"
   ...CellSpaceTool is added to the <td> tag (along with CellSpaceButton) for cell with Button="Html" and without ButtonText and with VAlign - the special toolbar button
*/
.TTMain .TTCellSpaceButton,.TTMain .TTSpaceButtonIconInner { padding-top:5px; padding-bottom:5px; white-space:nowrap; }
.TTWide .TTCellSpaceButton,.TTWide .TTSpaceButtonIconInner { padding-top:3px; padding-bottom:3px; }
.TTHigh .TTCellSpaceButton,.TTHigh .TTSpaceButtonIconInner { padding-top:6px; padding-bottom:4px; }
.TTBig .TTCellSpaceButton,.TTBig .TTSpaceButtonIconInner { padding-top:8px; padding-bottom:6px; }
.TTLow .TTCellSpaceButton,.TTLow .TTSpaceButtonIconInner { padding-top:2px; padding-bottom:2px; }
.TTMain .TTCellSpaceButtonIcon { padding-top:0px; padding-bottom:0px; white-space:nowrap; }
.TTSpaceButtonIconInner > div { overflow:hidden; }
.TTCellSpaceButtonButton { }
.TTMain .TTCellSpaceTool { padding:0px; }

/* Classes for Type Panel, Bool and Radio in Space cell */
.TTCellSpacePanel { line-height:0px; }
.TTMain .TTCellSpaceBool { line-height:0px; padding-top:0px; padding-bottom:0px; }
.TTCellSpaceRadio { padding-top:0px; padding-bottom:0px; }

/* Classes for Type="Select" or cell with Button="Defaults" in Space cell
   ...CellSpaceSelect is set to the <td> tag
   ...SpaceSelectInner is set to inner <div> tag
   ...SpaceSelectInnerIcon is set to inner <div> tag in cell with Icon
   ...SpaceSelectIconInner is set to inner inner <div> tag (along with Type class) in cell with Icon
*/
.TTCellSpaceSelect { padding:0px; }

.TTSpaceSelectInner,.TTSpaceSelectInnerIcon { padding:4px 27px 4px 6px; background-size:25px 100%; background-image:url(SideDefaultsSpace.svg); background-position:right center; background-repeat:no-repeat; white-space:nowrap; }
.TTSpaceSelectInnerIcon { padding:0px 20px 0px 1px; }
.TTSpaceSelectIconInner { padding:4px 6px 4px 6px; }
.TTSpaceSelectIconInner > div { overflow:hidden; }
.TTWide .TTSpaceSelectInner,.TTWide .TTSpaceSelectIconInner { padding-top:2px; padding-bottom:2px; }
.TTWide .TTSpaceSelectInner,.TTWide .TTSpaceSelectInnerIcon { background-size:25px 100%; }
.TTHigh .TTSpaceSelectInner,.TTHigh .TTSpaceSelectInnerIcon { padding-right:40px; background-size:29px 100%; }
.TTHigh .TTSpaceSelectInner { padding-top:5px; padding-bottom:3px; }
.TTHigh .TTSpaceSelectInnerIcon { padding-top:1px; padding-bottom:1px; }
.TTHigh .TTSpaceSelectIconInner { padding-top:4px; padding-bottom:2px; }
.TTBig .TTSpaceSelectInner,.TTBig .TTSpaceSelectInnerIcon { padding-top:7px; padding-bottom:5px; background-size:32px 100%; }
.TTBig .TTSpaceSelectInnerIcon { padding-top:3px; padding-bottom:3px; }
.TTGiant .TTSpaceSelectInner,.TTGiant .TTSpaceSelectInnerIcon { background-size:37px 100%; }
.TTLow .TTSpaceSelectInner,.TTLow .TTSpaceSelectIconInner { padding-top:1px; padding-bottom:1px; padding-right:21px; }
.TTLow .TTSpaceSelectInner,.TTLow .TTSpaceSelectInnerIcon { background-size:19px 100%; }

/* Classes for editable Space cell
   ...CellSpaceEdit is set to the <td> tag
   ...SpaceEditInner is set to inner <div> tag
   ...SpaceEditInnerIcon is set to inner <div> tag in cell with Icon
   ...SpaceEditIconInner is set to inner inner <div> tag (along with Type class) in cell with Icon
   ...SpaceEditButtonIconInner is set to inner inner <div> tag in cell with Icon and Button
*/
.TTCellSpaceEdit { padding:0px; }
.TTMain .TTSpaceEditInner,.TTMain .TTSpaceEditIconInner { padding:4px 6px 4px 6px; }
.TTMain .TTSpaceEditInnerIcon { padding:0px 2px 0px 1px; }
.TTSpaceEditIconInner > div { overflow:hidden; }
.TTMain .TTSpaceEditButtonIconInner { padding-top:0px; padding-bottom:0px; }
.TTWide .TTSpaceEditInner { padding-top:2px; padding-bottom:2px; }
.TTWide .TTSpaceEditInnerIcon { padding-top:1px; padding-bottom:1px; }
.TTWide .TTSpaceEditIconInner { padding-top:1px; padding-bottom:1px; }
.TTHigh .TTSpaceEditInner { padding-top:5px; padding-bottom:3px; }
.TTHigh .TTSpaceEditIconInner { padding-top:4px; padding-bottom:2px; }
.TTBig .TTSpaceEditInner { padding-top:7px; padding-bottom:5px; }
.TTBig .TTSpaceEditInnerIcon { padding-top:3px; padding-bottom:3px; }
.TTBig .TTSpaceEditIconInner { padding-top:4px; padding-bottom:2px; }

.TTLow .TTSpaceEditInner,.TTLow .TTSpaceEditIconInner { padding-top:1px; padding-bottom:1px; }

/* Classes added to <td> tag in cell in Space row with Space="-1" (...Above) or Space="5" (...Below)
*/
.TTCellSpaceAbove { }
.TTCellSpaceBelow { }

/* Class added to <div> tag with ClassInner class */
.TTMain .TTSpaceClassInner { padding-top:0px; padding-bottom:0px; }

/* Cells in rows with SpaceWrap=1
   ...SpaceWrap is set to parent div all the space cells
   ...CellSpaceWrap is set to individual divs as space cells
*/
.TTMain .TTSpaceWrap { padding-left:8px; padding-right:8px; white-space:normal; }
.TTHigh .TTSpaceWrap { padding-left:16px; padding-right:16px; }
.TTSmall .TTSpaceWrap { padding-left:6px; padding-right:6px; }
.TTTiny .TTSpaceWrap { padding-left:1px; padding-right:1px; }
.TTMain .TTCellSpaceWrap { display:inline-block; margin-top:7px; margin-bottom:7px; }
.TTHigh .TTCellSpaceWrap {  margin-top:8px; margin-bottom:8px; }
.TTLow .TTCellSpaceWrap {  margin-top:6px; margin-bottom:6px; }
.TTSmall .TTCellSpaceWrap { margin-top:5px; margin-bottom:5px; }
.TTTiny .TTCellSpaceWrap { margin-top:1px; margin-bottom:1px; }
.TTMain .TTCellSpaceWrap.TTEmpty { height:26px; margin-top:0px; margin-bottom:0px; padding-top:7px; padding-bottom:7px; }
.TTHigh .TTCellSpaceWrap.TTEmpty { height:30px; padding-top:8px; padding-bottom:8px; }
.TTBig .TTCellSpaceWrap.TTEmpty { height:34px; }
.TTLow .TTCellSpaceWrap.TTEmpty { height:20px; padding-top:6px; padding-bottom:6px; }
.TTTiny .TTCellSpaceWrap.TTEmpty { padding-top:1px; padding-bottom:1px; }
.TTWordWrap .TTSpaceWrap { word-wrap:break-word; overflow-wrap:break-word; }

/*--------------- Dynamic cell style ----------------- */

/* Classes added to cell with Rotate attribute. 
   @ Change them carefully, the rotation can differ per browser.
   ...CellRotate class is added to cell <td> tag in rotated cell
   ...Rotate1 and ...Rotate2 is set to inner <div> to do the rotation, according to Rotate attribute value
   ...IconRotate is added to cell <td> for cell with Icon attribute to display icon on top
   ...IconRotateHeader is added to cell <td> for Header cell with Icon attribute to display icon on top. It is added with ...IconRotate
*/
.TTCellRotate { text-overflow:clip; }
.TTCellRotate270 { vertical-align:bottom; text-align:right; }
.TTCellRotate270>div { text-align:right; }
.TTCellRotate315 { vertical-align:bottom; text-align:left; }
.TTCellRotate90,.TTCellRotate45,.TTCellRotateTBLR { vertical-align:top; text-align:left; }
.TTCellRotateTBRL { vertical-align:top; text-align:right; }
.TTCellRotate90>div,.TTCellRotate45>div,.TTCellRotate315>div { text-align:left; }
.TTCellRotateCenter { vertical-align:middle!important; text-align:center; }
.TTCellRotate > .TTType { padding-left:0px; padding-right:0px; }
.TTMain .TTCellRotate { padding-left:0px; padding-right:0px; }
.TTRotate { overflow:hidden; white-space:nowrap; display:inline-block; font-size:inherit; line-height:inherit; }
.TTRotate90,.TTRotate270,.TTRotateTBLR,.TTRotateTBRL { writing-mode:tb-rl; }
.TTRotate270,.TTRotate270 .TTPanelImage { -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }
.TTRotateTBLR { writing-mode:vertical-lr; text-orientation:upright; }
.TTRotateTBRL { writing-mode:vertical-rl; text-orientation:upright; -ms-transform:rotate(180deg); }
.TTIconRotate { padding-top:30px!important; padding-left:0px!important; padding-right:0px!important; background-position:center 5px!important; }
.TTIconRotateHeader { padding-top:40px!important; }
.TTHigh .TTIconRotateHeader { padding-top:55px!important; }
.TTBig .TTIconRotateHeader { padding-top:65px!important; }
.TTLow .TTIconRotateHeader { padding-top:30px!important; }
.TTIconRotate.TTAlignLeft { background-position-x:2px!important; }
.TTIconRotate.TTAlignCenter { background-position-x:center!important; }
.TTIconRotate.TTAlignRight { background-position-x:right 2px!important; }
.TTCellRotate.TTNoLeft { background-position-y:5px!important; }
.TTCalcRotate { display:grid; }

/* Class added to cell with TextSize set. @ Do not change */
.TTTextSize * { font-size:inherit; line-height:inherit; }

/* Classes added to cell with Wrap attribute. Added along with Type class to <td> or <div> tag. 
   @ Do not change. 
   ...Wrap0 for Wrap='0', ...Wrap1 for Wrap='1'
*/
.TTWrap0 { white-space:nowrap; }
.TTWrap1,.TTWrap2 { white-space:normal; }
.TTWrap2,.TTWordWrap .TTWrap1 { word-wrap:break-word; overflow-wrap:break-word; }
.TTWordWrap .TTWrap2 { word-wrap:normal; overflow-wrap:normal; }

/* Classes added to cell with Align attribute. Added along with Type class to <td> or <div> tag. 
   @ Do not change.
...AlignLeft for Align='Left', ...AlignCenter for Align='Center', ...AlignRight for Align='Right', ...AlignJustify for Align="Justify"
*/
.TTMain .TTAlignLeft { text-align:left; }
.TTMain .TTAlignCenter { text-align:center; }
.TTMain .TTAlignJustify { text-align:justify; }
.TTMain .TTAlignJustifyAll { text-align:justify; text-align-last:justify; }
.TTMain .TTAlignRight { text-align:right; }

/* Classes added to cell with VAlign attribute. Added always to <td> tag. 
   @ Do not change.
   ...VAlignTop for VAlign='Top', ...VAlignMiddle for VAlign='Middle', ...AlignBottom for Align='Bottom'
   The ...VAlignTop must be defined as the last one.
*/
.TTVAlignMiddle { vertical-align:middle; display:table-cell; }
.TTVAlignBottom { vertical-align:bottom; display:table-cell; }
.TTVAlignTop { vertical-align:top; display:table-cell; }

/* Classes for TextStyle attribute; @ Do not change */
.TTTextBold,.TTTextBold>div { font-weight:bold; }
.TTTextItalic,.TTTextItalic>div { font-style:italic; }
.TTTextUnderline,.TTTextUnderline>div { text-decoration:underline; }
.TTTextStrike,.TTTextStrike>div { text-decoration:line-through; }
.TTTextOverline,.TTTextOverline>div { text-decoration:overline; }
.TTTextUnderlineStrike,.TTTextUnderlineStrike>div { text-decoration:underline line-through; }
.TTTextUnderlineOverline,.TTTextUnderlineOverline>div { text-decoration:underline overline; }
.TTTextStrikeOverline,.TTTextStrikeOverline>div { text-decoration:line-through overline; }
.TTTextUnderlineStrikeOverline,.TTTextUnderlineStrikeOverline>div { text-decoration:underline line-through overline; }
.TTTextLine { text-decoration-color:currentColor; }
.TTTextLine * { text-decoration:inherit; }
.TTTextLineDouble { text-decoration-style:double; }
.TTTextLineDotted { text-decoration-style:dotted; }
.TTTextLineDashed { text-decoration-style:dashed; }
.TTTextLineWavy { text-decoration-style:wavy; }
.TTTextLineColor1 { text-decoration-color:red; }
.TTTextLineColor2 { text-decoration-color:#0DD; }
.TTTextLineColor3 { text-decoration-color:#000; }
.TTTextSmall,.TTTextSmall>div { font-variant:small-caps; }
div.TTTextTop,td.TTTextTop>div { position:relative; top:-6px; }
div.TTTextBottom,td.TTTextBottom>div { position:relative; top:5px; }
div.TTTextTop.TTTextBottom,td.TTTextTop.TTTextBottom>div { position:static; }
.TTTextTop,.TTTextBottom { font-size:10px; }
.TTTextTop *,.TTTextBottom * { font-size:inherit; }
.TTWide .TTTextTop,.TTWide .TTTextBottom { font-size:12px; }
.TTHigh div.TTTextTop,.TTHigh td.TTTextTop>div { top:-8px; }
.TTHigh div.TTTextBottom,.TTHigh td.TTTextBottom>div { top:7px; }
.TTGiant .TTTextTop,.TTGiant .TTTextBottom { font-size:16px; }
.TTGiant div.TTTextTop,.TTGiant td.TTTextTop>div { top:-11px; }
.TTGiant div.TTTextBottom,.TTGiant td.TTTextBottom>div { top:10px; }
.TTSmall div.TTTextTop,.TTSmall td.TTTextTop>div { top:-5px; }
.TTSmall div.TTTextBottom,.TTSmall td.TTTextBottom>div { top:3px; }
.TTSmall .TTTextTop,.TTSmall .TTTextBottom { font-size:8px; }

/* Classes used for TextShadow attribute; @ Change only text-shadow */
/* It is possible to add new classes with higher index like TextShadow10 and use the index in TextShadow attribute */
/* ...Shadow0 is used also for empty TextShadow when TextShadowColor is set */
/* The color in the first definition is replaced or added by TextShadowColor */
.TTTextShadow0 { text-shadow: 0px 0px 5px; }
.TTTextShadow1 { text-shadow: -1px -1px; }
.TTTextShadow2 { text-shadow: -1px -1px, -3px -3px silver; }
.TTTextShadow3 { text-shadow: -1px -1px, 0px 0px 5px; }
.TTTextShadow4 { text-shadow: -1px -1px, 0px 0px 10px; }
.TTTextShadow5 { text-shadow: -2px -2px silver; }
.TTTextShadow6 { text-shadow: -3px -3px silver, -1px -1px; }
.TTTextShadow7 { text-shadow: 0px 0px 3px black,0px 0px 3px black,0px 0px 3px black; }
.TTTextShadow8 { text-shadow: 0px 0px 5px yellow, -1px -1px; }
.TTTextShadow9 { text-shadow: 0px 0px 10px; }

/* Classes used for attribute Indent; @ Change only padding-left or padding-right */
.TTMain .TTIndentLeft1 { padding-left:10px; } .TTMain .TTIndentRight1 { padding-right:10px; }
.TTMain .TTIndentLeft2 { padding-left:20px; } .TTMain .TTIndentRight2 { padding-right:20px; }
.TTMain .TTIndentLeft3 { padding-left:30px; } .TTMain .TTIndentRight3 { padding-right:30px; }
.TTMain .TTIndentLeft4 { padding-left:40px; } .TTMain .TTIndentRight4 { padding-right:40px; }
.TTMain .TTIndentLeft5 { padding-left:50px; } .TTMain .TTIndentRight5 { padding-right:50px; }
.TTMain .TTIndentLeft6 { padding-left:60px; } .TTMain .TTIndentRight6 { padding-right:60px; }
.TTMain .TTIndentLeft7 { padding-left:70px; } .TTMain .TTIndentRight7 { padding-right:70px; }
.TTMain .TTIndentLeft8 { padding-left:80px; } .TTMain .TTIndentRight8 { padding-right:80px; }
.TTMain .TTIndentLeft9 { padding-left:90px; } .TTMain .TTIndentRight9 { padding-right:90px; }
.TTMain .TTIndentLeft10 { padding-left:100px; } .TTMain .TTIndentRight10 { padding-right:100px; }
.TTMain .TTIndentLeft15 { padding-left:150px; } .TTMain .TTIndentRight15 { padding-right:150px; }
.TTMain .TTIndentLeft20 { padding-left:200px; } .TTMain .TTIndentRight20 { padding-right:200px; }
.TTMain .TTIndentLeft25 { padding-left:250px; } .TTMain .TTIndentRight25 { padding-right:250px; }
.TTMain .TTIndentLeft30 { padding-left:300px; } .TTMain .TTIndentRight30 { padding-right:300px; }
.TTMain .TTIndentLeft35 { padding-left:350px; } .TTMain .TTIndentRight30 { padding-right:350px; }
.TTMain .TTIndentLeft40 { padding-left:400px; } .TTMain .TTIndentRight40 { padding-right:400px; }
.TTMain .TTIndentLeft45 { padding-left:450px; } .TTMain .TTIndentRight40 { padding-right:450px; }
.TTMain .TTIndentLeft50 { padding-left:500px; } .TTMain .TTIndentRight50 { padding-right:500px; }

/*--------------- Cell edges ----------------- */

/* @ Support classes, do not change 
   Classes added to table or Space cell if it should not have the left or right border or is empty
*/
.TTNoLeft,.TTNoSpaceLeft { border-left:0px none!important; border-bottom-left-radius:0px!important; border-top-left-radius:0px!important; }
.TTMain .TTNoSpaceLeft { padding-left:2px; }
.TTWide .TTNoSpaceLeft { padding-left:3px; }
.TTLow .TTNoSpaceLeft { padding-left:1px; }
.TTNoRight,.TTNoSpaceRight { border-right:0px none!important; border-bottom-right-radius:0px!important; border-top-right-radius:0px!important; background-image:none; }
.TTMain .TTNoSpaceRight { padding-right:2px; }
.TTWide .TTNoSpaceRight { padding-right:3px; }
.TTLow .TTNoSpaceRight { padding-right:1px; }
.TTNoSpaceLeft.TTNoSpaceRight { padding-left:0px; padding-right:0px; }
.TTEmpty { text-decoration:none!important; font-size:0px!important; line-height:0px!important; }

/*--------------- Pages type cell ----------------- */

/* ...Pages is set to <td> as Type class. @ Set here border, padding and background
   ...PagesLink is set to individual <a> tags as page numbers. @ Set here margin, padding, border, background and text attributes
   ...PagesLinkActive is set to <a> tag in actual selected page number instead
*/
.TTPages { overflow:visible; padding:0px!important; }
.TTPages,.TTPages > div { text-overflow:clip; }
.TTPagesLink,.TTPagesLinkActive { padding:2px 2px 2px 2px; margin:2px 3px 2px 3px; display:inline-block; cursor:pointer; }
.TTWide .TTPagesLink,.TTWide .TTPagesLinkActive { margin-left:5px; margin-right:5px; }
.TTLow .TTPagesLink,.TTLow .TTPagesLinkActive { margin-left:2px; margin-right:2px; }
/* The :hover remarkably slows down every grid in IE strict mode
.TTPagesLink:visited { color:blue; } 
.TTPagesLink:hover { color:red; }*/
.TTPagesLinkActive { }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                               Gantt column Header                                                       */
/* -------------------------------------------------------------------------------------------------------------------------- */

.TTGanttHeader { padding:0px 0px 0px 1px!important; }
.TTGanttHeaderOuter { }
.TTGanttHeaderInner { background-color:#56AEA7; }
.TTGanttHeaderBase { white-space:nowrap; }
.TTGanttHeaderBase * { font-size:inherit; line-height:inherit; }
.TTGanttHeaderSingle { border-bottom:10px solid #56AEA7; }
.TTLow .TTGanttHeaderSingle { border-bottom:9px solid #56AEA7; }
.TTSmall .TTGanttHeaderSingle { border-bottom:4px solid #56AEA7; }
.TTMini .TTGanttHeaderSingle { border-bottom:1px solid #56AEA7; }
.TTWide .TTGanttHeaderSingle { border-bottom:8px solid #56AEA7; }
.TTHigh .TTGanttHeaderSingle { border-bottom:18px solid #56AEA7; }
.TTBig .TTGanttHeaderSingle { border-bottom:28px solid #56AEA7; }
.TTGiant .TTGanttHeaderSingle { border-bottom:24px solid #56AEA7; }
.TTGanttFilter .TTGanttHeaderSingle { border-bottom:19px solid #56AEA7; }
.TTLow .TTGanttFilter .TTGanttHeaderSingle { border-bottom:12px solid #56AEA7; }
.TTSmall .TTGanttFilter .TTGanttHeaderSingle { border-bottom:7px solid #56AEA7; }
.TTTiny .TTGanttFilter .TTGanttHeaderSingle { border-bottom:1px solid #56AEA7; }
.TTWide .TTGanttFilter .TTGanttHeaderSingle { border-bottom:17px solid #56AEA7; }
.TTHigh .TTGanttFilter .TTGanttHeaderSingle { border-bottom:31px solid #56AEA7; }
.TTBig .TTGanttFilter .TTGanttHeaderSingle { border-bottom:33px solid #56AEA7; }
.TTGiant .TTGanttFilter .TTGanttHeaderSingle { border-bottom:29px solid #56AEA7; }
.TTGanttHeader1 { }
.TTGanttHeader2 { }
.TTGanttHeader3 { }
.TTGanttHeader4 { }
.TTGanttHeader5 { }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                             Tree cell                                                         */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Class set to the tree in <td> tag left to MainCol cell 
   @ They are not expected to change, but you can set here background or border
   ...Tree is set for <Cfg NoTreeLines='0'/>, default setting. It is set to inner <td> tag for SpannedTree
   ...NoTreeLines... is set instead of Tree for NoTreeLines value 1 - 3.
   ...SpannedTree is added to main tree <td> for <Cfg SpannedTree='1'/>
*/
.TTTree { padding:0px; white-space:nowrap; line-height:0px; height:0px; }
.TTFF .TTTree { height:100%; }
.TTNoTreeLines1,.TTNoTreeLines2,.TTNoTreeLines3 { text-align:right; line-height:0px; }
.TTSpannedTree { line-height:0px; height:0px; }
.TTTree { text-overflow:clip; }

/* ------------- Tree images with lines (NoTreeLines='0') ------------- */

/* Default align of tree, if no cell VAlign attribute specified. @Set only vertical-align to top/middle/bottom. */
.TTTreeAlign { vertical-align:middle; }

/* Default tree class set to <td> tag or to inner <u> tag
   The tree is shown in inner <u> tags if it cannot be set by one background image or in SpannedTree or with TreeIcon.
   @ Set only padding-left in ...Width, but preserve: Width2 = Width1*2, Width3 = Width1*3, Width2T = Width1+Width1T, Width3T = Width2+Width1T, Width4T = Width3+Width1T.
   @ Or change also background, but it is not so easy to calculate the positions and sizes correctly.
   ...TreeTop / ...TreeMiddle / ...TreeBottom is set according to VAlign value, for empty is chosen according to ...TreeAlign
   ...TreeRev is added for <Cfg ReversedTree='1'/>
   ...TreeIcon is set if used custom tree icon by <I TreeIcon/>
   ...TreeImage is set only to inner <u> tag
   ...TreeImageIE is set instead of ...TreeImage in all IE modes except IE5 quirks and also in Firefox strict mode
   ...Width... is width of the tree icon part, number is count of the icon lines, ...T is ending icon / button
   ...Width1 is also used measure one level indent, ...Width1T is also used to measure tree button width
*/
.TTTreeTop,.TTTreeMiddle,.TTTreeBottom { background-repeat:no-repeat!important; }
.TTTreeTop.TTTreeIcon { background-position:center top; }
.TTTreeMiddle.TTTreeIcon { background-position:center center; }
.TTTreeBottom.TTTreeIcon { background-position:center bottom; }
.TTTreeImage,.TTTreeImageIE { display:inline-block; height:100%; width:0px; }
.TTWidth1 { padding-left:24px;   background:url(TreeVLine.svg) 73.4% 0px; background-position-x:17px; }
.TTWidth2 { padding-left:48px;   background:url(TreeVLine.svg) 86.7% 0px,url(TreeVLine.svg) 36.7% 0px; background-position-x:41px,17px; }
.TTWidth3 { padding-left:72px;   background:url(TreeVLine.svg) 91.1% 0px,url(TreeVLine.svg) 57.8% 0px,url(TreeVLine.svg) 24.0% 0px; background-position-x:65px,41px,17px; }
.TTWidth1T { padding-left:34px;  background:none right 47.6% center/15px 15px,url(TreeHLine.svg) calc(50.0% + 50.0px) center,url(TreeVLine.svg) left 52.2% top; background-position-x:10px,17px,17px; } 
.TTWidth2T { padding-left:58px;  background:none right 21.0% center/15px 15px,url(TreeHLine.svg) calc(70.8% + 70.8px) center,url(TreeVLine.svg) 72.1% 0px,url(TreeVLine.svg) 30.5% 0px; background-position-x:34px,41px,41px,17px; } 
.TTWidth3T { padding-left:82px;  background:none,url(TreeHLine.svg) calc(79.4% + 79.4px) 50%,url(TreeVLine.svg) 80.3% 0px,url(TreeVLine.svg) 50.9% 0px,url(TreeVLine.svg) 21.5% 0px; background-position-x:58px,65px,65px,41px,17px; } 
.TTWidth4T { padding-left:106px; background:none,url(TreeHLine.svg) calc(84.1% + 84.1px) 50%,url(TreeVLine.svg) 84.8% 0px,url(TreeVLine.svg) 62% 0px,url(TreeVLine.svg) 39.4% 0px,url(TreeVLine.svg) 16.4% 0px; background-position-x:82px,89px,89px,65px,41px,17px; }
.TTWide .TTWidth1T { padding-left:45px; background-position-x:14px,24px,24px; background-size:20px 20px; } .TTWide .TTWidth1 { padding-left:32px; background-position-x:24px; }
.TTWide .TTWidth2T { padding-left:77px; background-position-x:46px,56px,56px,24px; background-size:20px 20px; } .TTWide .TTWidth2 { padding-left:64px; background-position-x:56px,24px; }
.TTWide .TTWidth3T { padding-left:109px; background-position-x:78px,88px,88px,56px,24px } .TTWide .TTWidth3 { padding-left:96px; background-position-x:88px,56px,24px; }
.TTWide .TTWidth4T { padding-left:141px; background-position-x:110px,120px,120px,88px,56px,24px; }
.TTBig .TTWidth1T,.TTBig .TTWidth2T { background-size:24px 24px; }
.TTLow .TTWidth1T { padding-left:22px; background-position-x:3px,9px,9px; background-size:13px 13px; } .TTLow .TTWidth1 { padding-left:16px; background-position-x:9px; }
.TTLow .TTWidth2T { padding-left:38px; background-position-x:19px,25px,25px,9px; background-size:13px 13px; } .TTLow .TTWidth2 { padding-left:32px; background-position-x:25px,9px; }
.TTLow .TTWidth3T { padding-left:54px; background-position-x:35px,41px,41px,25px,9px; } .TTLow .TTWidth3 { padding-left:48px; background-position-x:41px,25px,9px; }
.TTLow .TTWidth4T { padding-left:70px; background-position-x:51px,57px,57px,41px,25px,9px; }
.TTMain .TTTreeL {   background-position-y:50%,50%,calc(50% - 500px),0px,0px,0px; }
.TTTreeRev.TTTreeL { background-position-y:50%,50%,calc(50% + 500px),0px,0px,0px; }
.TTTreeTop.TTTreeT {          background-position-y: 8px,15px,0px,0px,0px,0px; }
.TTWide .TTTreeTop.TTTreeT {  background-position-y: 5px,15px,0px,0px,0px,0px; }
.TTHigh .TTTreeTop.TTTreeT {  background-position-y:10px,20px,0px,0px,0px,0px; }
.TTBig .TTTreeTop.TTTreeT {   background-position-y:13px,25px,0px,0px,0px,0px; }
.TTLow .TTTreeTop.TTTreeT {   background-position-y: 6px,12px,0px,0px,0px,0px; }
.TTSmall .TTTreeTop.TTTreeT { background-position-y: 4px,10px,0px,0px,0px,0px; }
.TTMini .TTTreeTop.TTTreeT {  background-position-y: 3px, 9px,0px,0px,0px,0px; }
.TTTreeTop.TTTreeL {          background-position-y: 8px,15px,-985px,0px,0px,0px; }
.TTWide .TTTreeTop.TTTreeL {  background-position-y: 5px,15px,-985px,0px,0px,0px; }
.TTHigh .TTTreeTop.TTTreeL {  background-position-y:10px,20px,-980px,0px,0px,0px; }
.TTBig .TTTreeTop.TTTreeL {   background-position-y:13px,25px,-975px,0px,0px,0px; }
.TTLow .TTTreeTop.TTTreeL {   background-position-y: 6px,12px,-988px,0px,0px,0px; }
.TTSmall .TTTreeTop.TTTreeL { background-position-y: 4px,10px,-990px,0px,0px,0px; }
.TTMini .TTTreeTop.TTTreeL {  background-position-y: 3px, 9px,-991px,0px,0px,0px; }
.TTTreeRev.TTTreeTop.TTTreeL {          background-position-y: 8px,15px,15px,0px,0px,0px; }
.TTWide .TTTreeRev.TTTreeTop.TTTreeL {  background-position-y: 5px,15px,15px,0px,0px,0px; }
.TTHigh .TTTreeRev.TTTreeTop.TTTreeL {  background-position-y:10px,20px,20px,0px,0px,0px; }
.TTBig .TTTreeRev.TTTreeTop.TTTreeL {   background-position-y:13px,25px,25px,0px,0px,0px; }
.TTLow .TTTreeRev.TTTreeTop.TTTreeL {   background-position-y: 6px,12px,12px,0px,0px,0px; }
.TTSmall .TTTreeRev.TTTreeTop.TTTreeL { background-position-y: 4px,10px,10px,0px,0px,0px; }
.TTMini .TTTreeRev.TTTreeTop.TTTreeL {  background-position-y: 3px, 9px, 9px,0px,0px,0px; }
.TTTreeBottom.TTTreeT {          background-position-y:calc(100% -  7px),calc(100% - 14px),0px,0px,0px,0px; }
.TTWide .TTTreeBottom.TTTreeT {  background-position-y:calc(100% -  5px),calc(100% - 14px),0px,0px,0px,0px; }
.TTHigh .TTTreeBottom.TTTreeT {  background-position-y:calc(100% - 10px),calc(100% - 19px),0px,0px,0px,0px; }
.TTBig .TTTreeBottom.TTTreeT {   background-position-y:calc(100% - 13px),calc(100% - 24px),0px,0px,0px,0px; }
.TTLow .TTTreeBottom.TTTreeT {   background-position-y:calc(100% -  6px),calc(100% - 12px),0px,0px,0px,0px; }
.TTSmall .TTTreeBottom.TTTreeT { background-position-y:calc(100% -  3px),calc(100% -  9px),0px,0px,0px,0px; }
.TTMini .TTTreeBottom.TTTreeT {  background-position-y:calc(100% -  2px),calc(100% -  8px),0px,0px,0px,0px; }
.TTTreeBottom.TTTreeL {          background-position-y:calc(100% -  7px),calc(100% - 14px),calc(100% - 14px),0px,0px,0px; }
.TTWide .TTTreeBottom.TTTreeL {  background-position-y:calc(100% -  5px),calc(100% - 14px),calc(100% - 14px),0px,0px,0px; }
.TTHigh .TTTreeBottom.TTTreeL {  background-position-y:calc(100% - 10px),calc(100% - 19px),calc(100% - 19px),0px,0px,0px; }
.TTBig .TTTreeBottom.TTTreeL {   background-position-y:calc(100% - 13px),calc(100% - 24px),calc(100% - 24px),0px,0px,0px; }
.TTLow .TTTreeBottom.TTTreeL {   background-position-y:calc(100% -  6px),calc(100% - 12px),calc(100% - 12px),0px,0px,0px; }
.TTSmall .TTTreeBottom.TTTreeL { background-position-y:calc(100% -  3px),calc(100% -  9px),calc(100% -  9px),0px,0px,0px; }
.TTMini .TTTreeBottom.TTTreeL {  background-position-y:calc(100% -  2px),calc(100% -  8px),calc(100% -  8px),0px,0px,0px; }
.TTTreeRev.TTTreeBottom.TTTreeL {          background-position-y:calc(100% -  7px),calc(100% - 14px),calc(100% + 986px),0px,0px,0px; }
.TTWide .TTTreeRev.TTTreeBottom.TTTreeL {  background-position-y:calc(100% -  5px),calc(100% - 14px),calc(100% + 986px),0px,0px,0px; }
.TTHigh .TTTreeRev.TTTreeBottom.TTTreeL {  background-position-y:calc(100% - 10px),calc(100% - 19px),calc(100% + 981px),0px,0px,0px; }
.TTBig .TTTreeRev.TTTreeBottom.TTTreeL {   background-position-y:calc(100% - 13px),calc(100% - 24px),calc(100% + 976px),0px,0px,0px; }
.TTLow .TTTreeRev.TTTreeBottom.TTTreeL {   background-position-y:calc(100% -  6px),calc(100% - 12px),calc(100% + 988px),0px,0px,0px; }
.TTSmall .TTTreeRev.TTTreeBottom.TTTreeL { background-position-y:calc(100% -  3px),calc(100% -  9px),calc(100% + 991px),0px,0px,0px; }
.TTMini .TTTreeRev.TTTreeBottom.TTTreeL {  background-position-y:calc(100% -  2px),calc(100% -  8px),calc(100% + 992px),0px,0px,0px; }

/* Individual tree backgrounds for vertical lines only, 1 means vertical line, 0 means no vertical line, the background-size: 3rd v-line, 2nd v-line, 1st v-line */
.TT111 { background-size:1px 100%,1px 100%,1px 100%; }
.TT110 { background-size:0px 0px ,1px 100%,1px 100%; }
.TT101 { background-size:1px 100%,0px 0px ,1px 100%; }
.TT100 { background-size:0px 0px ,0px 0px ,1px 100%; }
.TT011,.TT11 { background-size:1px 100%,1px 100%,0px 0px ; }
.TT010,.TT10 { background-size:0px 0px ,1px 100%,0px 0px ; }
.TT001,.TT01,.TT1 { background-size:1px 100%,0px 0px ,0px 0px ; }
.TT000,.TT00,.TT0 { background-size:0px 0px ,0px 0px ,0px 0px ; }

/* Individual tree backgrounds for vertical lines plus not leaf ending, 1 means vertical line, 0 means no vertical line, the background-size: button, button h-line, button v-line, 3rd v-line, 2nd v-line, 1st v-line */
.TT111T { background-size:24px 24px,100px 1px,1px 1000px,1px 100%,1px 100%,1px 100%; }
.TT110T { background-size:24px 24px,100px 1px,1px 1000px,0px 0px ,1px 100%,1px 100%; }
.TT101T { background-size:24px 24px,100px 1px,1px 1000px,1px 100%,0px 0px ,1px 100%; }
.TT100T { background-size:24px 24px,100px 1px,1px 1000px,0px 0px ,0px 0px ,1px 100%; }
.TT011T,.TT11T { background-size:24px 24px,100px 1px,1px 1000px,1px 100%,1px 100%,0px 0px ; }
.TT010T,.TT10T { background-size:24px 24px,100px 1px,1px 1000px,0px 0px ,1px 100%,0px 0px ; }
.TT001T,.TT01T { background-size:24px 24px,100px 1px,1px 1000px,1px 100%,0px 0px ,0px 0px ; }
.TT000T,.TT00T { background-size:24px 24px,100px 1px,1px 1000px,0px 0px ,0px 0px ,0px 0px ; }

/* Icons for tree buttons, the background-image: button, button h-line, button v-line, 1st v-line */
.TT1E,.TT0E,.TT1EL,.TT0EL { background-image:url(TreeExpand.svg),url(TreeHLine.svg),url(TreeVLine.svg),url(TreeVLine.svg); }
.TT1C,.TT0C,.TT1CL,.TT0CL { background-image:url(TreeCollapse.svg),url(TreeHLine.svg),url(TreeVLine.svg),url(TreeVLine.svg); }
.TTE,.TTEL { background-image:url(TreeExpand.svg),url(TreeHLine.svg),url(TreeVLine.svg); }
.TTC,.TTCL { background-image:url(TreeCollapse.svg),url(TreeHLine.svg),url(TreeVLine.svg); }
.TTD0,.TTD0L { background-image:url(TreeDropNone.svg),url(TreeHLine.svg),url(TreeVLine.svg); }
.TTD1,.TTD1L { background-image:url(TreeDropAbove.svg),url(TreeHLine.svg),url(TreeVLine.svg); }
.TTD2,.TTD2L { background-image:url(TreeDropInto.svg),url(TreeHLine.svg),url(TreeVLine.svg); }
.TTD3,.TTD3L { background-image:url(TreeDropBelow.svg),url(TreeHLine.svg),url(TreeVLine.svg); }
.TTD4,.TTD4L { background-image:url(TreeWait.svg),url(TreeHLine.svg),url(TreeVLine.svg); }

/* Individual tree backgrounds for vertical lines plus buttons, 1 means vertical line, 0 means no vertical line, the background-size: button, button h-line, button v-line, 1st v-line */
.TT1T,.TT1E,.TT1C,.TT1TL,.TT1EL,.TT1CL { background-size:15px 15px,100px 1px,1px 1000px,1px 100%; }
.TT0T,.TT0E,.TT0C,.TT0TL,.TT0EL,.TT0CL { background-size:15px 15px,100px 1px,1px 1000px,0px 0px ; }
.TTT,.TTE,.TTC,.TTD0,.TTD1,.TTD2,.TTD3,.TTD4,.TTTL,.TTEL,.TTCL,.TTD0L,.TTD1L,.TTD2L,.TTD3L,.TTD4L { background-size:15px 15px,100px 1px,1px 1000px; }
.TTWide .TT1T,.TTWide .TT1E,.TTWide .TT1C,.TTWide .TT1TL,.TTWide .TT1EL,.TTWide .TT1CL { background-size:20px 20px,100px 1px,1px 1000px,1px 100%; }
.TTWide .TT0T,.TTWide .TT0E,.TTWide .TT0C,.TTWide .TT0TL,.TTWide .TT0EL,.TTWide .TT0CL { background-size:20px 20px,100px 1px,1px 1000px,0px 0px ; }
.TTWide .TTT,.TTWide .TTE,.TTWide .TTC,.TTWide .TTD0,.TTWide .TTD1,.TTWide .TTD2,.TTWide .TTD3,.TTWide .TTD4,.TTWide .TTTL,.TTWide .TTEL,.TTWide .TTCL,.TTWide .TTD0L,.TTWide .TTD1L,.TTWide .TTD2L,.TTWide .TTD3L,.TTWide .TTD4L { background-size:20px 20px,100px 1px,1px 1000px; }
.TTBig .TT1T,.TTBig .TT1E,.TTBig .TT1C,.TTBig .TT1TL,.TTBig .TT1EL,.TTBig .TT1CL { background-size:24px 24px,100px 1px,1px 1000px,1px 100%; }
.TTBig .TT0T,.TTBig .TT0E,.TTBig .TT0C,.TTBig .TT0TL,.TTBig .TT0EL,.TTBig .TT0CL { background-size:24px 24px,100px 1px,1px 1000px,0px 0px ; }
.TTBig .TTT,.TTBig .TTE,.TTBig .TTC,.TTBig .TTD0,.TTBig .TTD1,.TTBig .TTD2,.TTBig .TTD3,.TTBig .TTD4,.TTBig .TTTL,.TTBig .TTEL,.TTBig .TTCL,.TTBig .TTD0L,.TTBig .TTD1L,.TTBig .TTD2L,.TTBig .TTD3L,.TTBig .TTD4L { background-size:24px 24px,100px 1px,1px 1000px; }
.TTLow .TT1T,.TTLow .TT1E,.TTLow .TT1C,.TTLow .TT1TL,.TTLow .TT1EL,.TTLow .TT1CL { background-size:13px 13px,100px 1px,1px 1000px,1px 100%; }
.TTLow .TT0T,.TTLow .TT0E,.TTLow .TT0C,.TTLow .TT0TL,.TTLow .TT0EL,.TTLow .TT0CL { background-size:13px 13px,100px 1px,1px 1000px,0px 0px ; }
.TTLow .TTT,.TTLow .TTE,.TTLow .TTC,.TTLow .TTD0,.TTLow .TTD1,.TTLow .TTD2,.TTLow .TTD3,.TTLow .TTD4,.TTLow .TTTL,.TTLow .TTEL,.TTLow .TTCL,.TTLow .TTD0L,.TTLow .TTD1L,.TTLow .TTD2L,.TTLow .TTD3L,.TTLow .TTD4L { background-size:13px 13px,100px 1px,1px 1000px; }

/* ------------- Tree images without lines (NoTreeLines='1') ------------- */

/* Tree classes set to <td> tag or to inner <u> tag
   The tree is shown in inner <u> tags in SpannedTree, with TreeIcon or with VAlign
   @ Set here height, width and background
   ...NC - Icon for button collapse, ...NE - Icon for button expand, ...NT - Icon for leaf none without button, ...NCR / ...NER / ...NTR - Shown instead in RTL mode
   ...ND0 - ...ND3 - Icons shown during dragging - drop permissions: ...ND0 - no drop, ...ND1 - drop above, ...ND2 - drop inside, ...ND3 - drop below
   ...NTree is set to <td> tag if not used <u> tags
   ...NTreeImage is set to inner <u> tag; it is also used to read the default width of tree button
   ...NIcon is set if used custom tree icon by <I TreeIcon/>
   ...NWidth is never assigned, it is used to read the default width of one level indent
*/
.TTNTree,.TTNTreeImage { background-size:15px 15px; background-position:right 9px center; background-repeat:no-repeat; }
.TTWide .TTNTree,.TTWide .TTNTreeImage { background-size:20px 20px; background-position:right 12px center; }
.TTBig .TTNTree,.TTBig .TTNTreeImage { background-size:24px 24px; background-position:right 10px center; }
.TTLow .TTNTree,.TTLow .TTNTreeImage { background-size:13px 13px; background-position:right 3px center; }
.TTRtl .TTNTree,.TTRtl .TTNTreeImage { background-position:left 9px center; }
.TTRtl.TTWide .TTNTree,.TTRtl.TTWide .TTNTreeImage { background-position:left 12px center; }
.TTRtl.TTBig .TTNTree,.TTRtl.TTBig .TTNTreeImage { background-position:left 10px center; }
.TTRtl.TTLow .TTNTree,.TTRtl.TTLow .TTNTreeImage { background-position:left 3px center; }
.TTNTreeImage { display:inline-block; width:34px; height:30px; }
.TTWide .TTNTreeImage { width:45px; }
.TTHigh .TTNTreeImage { height:40px; }
.TTBig .TTNTreeImage { height:50px; }
.TTLow .TTNTreeImage { width:22px; height:25px; }
.TTSmall .TTNTreeImage { height:20px; }
.TTMini .TTDataRow .TTNTreeImage { height:16px; }
.TTNIcon { }
.TTNWidth { width:24px; }
.TTWide .TTNWidth { width:32px; }
.TTLow .TTNWidth { width:16px; }
.TTNC,.TTNCR { background-image:url(TreeCollapse.svg?v120); }
.TTNE,.TTNER { background-image:url(TreeExpand.svg?v120); }
.TTND0,.TTND0R { background-image:url(TreeDropNone.svg?v120); }
.TTND1 { background-image:url(TreeDropAbove.svg?v120); }
.TTND1R { background-image:url(TreeDropAboveRtl.svg?v120); }
.TTND2 { background-image:url(TreeDropInto.svg?v120); }
.TTND2R { background-image:url(TreeDropIntoRtl.svg?v120); }
.TTND3 { background-image:url(TreeDropBelow.svg?v120); }
.TTND3R { background-image:url(TreeDropBelowRtl.svg?v120); }
.TTND4,.TTND4R { background-image:url(TreeWait.svg?v120); }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                       Panel type cell                                                         */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------- Standard Panel images (FastPanel='0') ------------- */

/* @ Set here width, height and background.
   @ If there is present <button> in panel, set here padding-left and font-size instead of width and height
   ...PanelImage is set to every panel icon <u> tag if there is no <button> in the panel.
   ...PanelImageButton is set to every panel icon <u> tag if there also some <button> in the panel
   ...PanelEmpty is shown for panel button named "Empty"
   ...PanelMove is shown for panel button named "Move", ...PanelMoveOff is shown for rows without moving permissions
   ...PanelSelect is shown for panel button named "Select", ...PanelSelectOff is shown for rows without selecting permissions, ...PanelSelectOn is shown for rows with Select="1"
   ...PanelDelete is shown for panel button named "Delete", ...PanelDeleteOff is shown for rows without deleting permissions
   ...PanelCopy is shown for panel button named "Copy", ...PanelCopyOff is shown for rows without copying permissions
   ...PanelButton is shown if the panel button has not defined image and is shown as <button> or <u> depending on <Cfg UseButton>. @ Set here margin, border, padding, width, height and text attributes
*/
.TTPanelImage { width:19px; background-size:15px 15px; height:30px; display:inline-block; background-repeat:no-repeat; background-position:center center; }
.TTWide .TTPanelImage { width:24px; background-size:20px 20px; }
.TTHigh .TTPanelImage { height:40px; }
.TTBig .TTPanelImage { height:50px; width:34px; background-size:24px 24px; }
.TTGiant .TTPanelImage { line-height:22px; }
.TTLow .TTPanelImage { height:25px; width:16px; background-size:13px 13px; }
.TTSmall .TTPanelImage { height:20px; }
.TTMini .TTPanelImage { height:17px; }
.TTMini .TTDataRow .TTPanelImage { height:17px; }
.TTCellRotate .TTPanelImage { height:20px; }
.TTWide .TTCellRotate .TTPanelImage { height:25px; }
.TTHigh .TTCellRotate .TTPanelImage { height:30px; }
.TTPanelImageButton { padding:0px 0px 0px 19px; background-size:15px 15px; background-repeat:no-repeat; zoom:1; }
.TTWide .TTPanelImageButton { padding-left:26px; background-size:20px 20px; }
.TTBig .TTPanelImageButton { padding:2px 0px 2px 34px; background-size:24px 24px; }
.TTGiant .TTPanelImageButton { padding-top:0px; padding-bottom:0px; }
.TTPanelEmpty { background:none; }
.TTPanelMove { background-image:url(PanelMove.svg?v120); }
.TTPanelSelect { background-image:url(PanelSelect.svg?v120); }
.TTPanelSelectOn { background-image:url(PanelSelected.svg?v120); }
.TTPanelDelete { background-image:url(PanelDelete.svg?v120); }
.TTCellHeaderPanel .TTPanelDelete,.TTCellIndexPanel .TTPanelDelete { background-image:url(PanelDeleteHeader.svg?v120); }
.TTPanelCopy { background-image:url(PanelCopy.svg?v120); }
.TTLow .TTPanelCopy { background-image:url(PanelCopySmall.svg?v120); }
.TTCellHeaderPanel .TTPanelCopy,.TTCellIndexPanel .TTPanelCopy { background-image:url(PanelCopyHeader.svg?v120); }
.TTLow .TTCellHeaderPanel .TTPanelCopy,.TTLow .TTCellIndexPanel .TTPanelCopy { background-image:url(PanelCopyHeaderSmall.svg?v120); }
.TTPanelMoveOff,.TTPanelSelectOff,.TTPanelDeleteOff,.TTPanelCopyOff { }
.TTPanelButton { display:inline-block; cursor:pointer; overflow:hidden; white-space:nowrap; }
button.TTPanelButton { margin:5px 7px 5px 0px; padding:1px 0px 1px 2px; line-height:14px; color:inherit; }
.TTWide button.TTPanelButton { margin-top:2px; margin-bottom:2px; line-height:20px; }
.TTHigh button.TTPanelButton { margin-top:7px; margin-bottom:7px; }
.TTBig button.TTPanelButton { margin-top:12px; margin-bottom:12px; }
.TTGiant button.TTPanelButton { margin-top:10px; margin-bottom:10px; line-height:24px; }
.TTLow button.TTPanelButton { margin-top:3px; margin-bottom:2px; }
.TTSmall button.TTPanelButton { margin-top:2px; margin-bottom:1px; line-height:13px; padding-top:0px; padding-bottom:0px; }
.TTMini .TTDataRow button.TTPanelButton { margin-top:0px; line-height:11px; }
u.TTPanelButton { margin:6px 3px 6px 3px; padding:0px 5px 0px 5px; text-decoration:none; }
.TTWide u.TTPanelButton { margin-top:4px; margin-bottom:4px; }
.TTHigh u.TTPanelButton { margin-top:9px; margin-bottom:9px; }
.TTBig u.TTPanelButton { margin-top:12px; margin-bottom:12px; padding-top:2px; padding-bottom:2px; }
.TTGiant u.TTPanelButton { padding-top:0px; padding-bottom:0px; }
.TTLow u.TTPanelButton { margin-top:4px; margin-bottom:3px; }
.TTSmall u.TTPanelButton { margin-top:2px; margin-bottom:2px; line-height:14px; }
.TTMini .TTDataRow u.TTPanelButton { margin-top:1px; margin-bottom:1px; line-height:12px; }
.TTCellHeaderPanel u.TTPanelButton { }

/* ------------- Fast Panel images (FastPanel='1')------------- */

/* @ Change background-position-x only or for custom images use rather standard panel (FastPanel='0').
   The image is composed from 5 icons, the second and third icons is on the same place as Select/Selected icon.
   ...FastPanel is set to every icon in the fast Panel
   MSDC - four icons or some missing, Move, Select, Delete, Copy
*/
.TTFastPanel {
   background-image:url(PanelMove.svg?v120),url(PanelSelect.svg?v120),url(PanelSelected.svg?v120),url(PanelDelete.svg?v120),url(PanelCopy.svg?v120);
   background-position-y:-1000px,-1000px,-1000px,-1000px,-1000px; background-repeat:no-repeat; background-size:15px 15px;
   }
.TTLow .TTFastPanel { background-image:url(PanelMove.svg?v120),url(PanelSelect.svg?v120),url(PanelSelected.svg?v120),url(PanelDelete.svg?v120),url(PanelCopySmall.svg?v120); }
.TTPMSDC,.TTPMSD,.TTPMS,.TTPM { background-position-x:8px,27px,27px,46px,65px; }
.TTPSDC,.TTPSD,.TTPS { background-position-x:-1000px,8px,8px,27px,46px; }
.TTPSC { background-position-x:-1000px,8px,8px,-1000px,27px; }
.TTPDC,.TTPD { background-position-x:-1000px,-1000px,-1000px,8px,27px; }
.TTPC { background-position-x:-1000px,-1000px,-1000px,-1000px,8px; }
.TTPMDC,.TTPMD { background-position-x:8px,-1000px,-1000px,27px,46px; }
.TTPMSC { background-position-x:8px,27px,27px,-1000px,46px; }
.TTWide .TTFastPanel { background-size:20px 20px; }
.TTWide .TTPMSDC,.TTWide .TTPMSD,.TTWide .TTPMS,.TTPM { background-position-x:8px,32px,32px,56px,80px; }
.TTWide .TTPSDC,.TTWide .TTPSD,.TTWide .TTPS { background-position-x:-1000px,8px,8px,32px,56px; }
.TTWide .TTPSC { background-position-x:-1000px,8px,8px,-1000px,32px; }
.TTWide .TTPDC,.TTWide .TTPD { background-position-x:-1000px,-1000px,-1000px,8px,32px; }
.TTWide .TTPC { background-position-x:-1000px,-1000px,-1000px,-1000px,8px; }
.TTWide .TTPMDC,.TTWide .TTPMD { background-position-x:8px,-1000px,-1000px,32px,56px; }
.TTWide .TTPMSC { background-position-x:8px,32px,32px,-1000px,56px; }
.TTBig .TTFastPanel { background-size:24px 24px; }
.TTBig .TTPMSDC,.TTBig .TTPMSD,.TTBig .TTPMS,.TTBig .TTPM { background-position-x:14px,45px,45px,79px,112px; }
.TTBig .TTPSDC,.TTBig .TTPSD,.TTBig .TTPS { background-position-x:-1000px,11px,11px,45px,79px; }
.TTBig .TTPSC { background-position-x:-1000px,11px,11px,-1000px,45px; }
.TTBig .TTPDC,.TTBig .TTPD { background-position-x:-1000px,-1000px,-1000px,11px,45px; }
.TTBig .TTPC { background-position-x:-1000px,-1000px,-1000px,-1000px,11px; }
.TTBig .TTPMDC,.TTBig .TTPMD { background-position-x:14px,-1000px,-1000px,45px,79px; }
.TTBig .TTPMSC { background-position-x:14px,45px,45px,-1000px,79px; }
.TTLow .TTFastPanel { background-size:13px 13px; }
.TTLow .TTPMSDC,.TTLow .TTPMSD,.TTLow .TTPMS,.TTLow .TTPM { background-position-x:3px,19px,19px,35px,51px; }
.TTLow .TTPSDC,.TTLow .TTPSD,.TTLow .TTPS { background-position-x:-1000px,3px,3px,19px,35px; }
.TTLow .TTPSC { background-position-x:-1000px,3px,3px,-1000px,19px; }
.TTLow .TTPDC,.TTLow .TTPD { background-position-x:-1000px,-1000px,-1000px,3px,19px; }
.TTLow .TTPC { background-position-x:-1000px,-1000px,-1000px,-1000px,3px; }
.TTLow .TTPMDC,.TTLow .TTPMD { background-position-x:3px,-1000px,-1000px,19px,35px; }
.TTLow .TTPMSC { background-position-x:3px,19px,19px,-1000px,35px; }

/* Hides unused icons. Numbers: 1 - shown, 2 - (on, for select), 0 - hidden, but space reserved, x - hidden completely, with no space; @ Do not change */
.TTP1211 { background-position-y:center,-1000px,center,center,center; }
.TTP1210,.TTP121x { background-position-y:center,-1000px,center,center,-1000px; }
.TTP1201,.TTP12x1 { background-position-y:center,-1000px,center,-1000px,center; }
.TTP1200,.TTP12x0,.TTP120x,.TTP12xx { background-position-y:center,-1000px,center,-1000px,-1000px; }
.TTP1111 { background-position-y:center,center,-1000px,center,center; }
.TTP1110,.TTP111x { background-position-y:center,center,-1000px,center,-1000px; }
.TTP1101,.TTP11x1 { background-position-y:center,center,-1000px,-1000px,center; }
.TTP1100,.TTP11x0,.TTP110x,.TTP11xx { background-position-y:center,center,-1000px,-1000px,-1000px; }
.TTP1011,.TTP1x11 { background-position-y:center,-1000px,-1000px,center,center; }
.TTP1010,.TTP1x10,.TTP101x,.TTP1x1x { background-position-y:center,-1000px,-1000px,center,-1000px; }
.TTP1001,.TTP1x01,.TTP10x1,.TTP1xx1 { background-position-y:center,-1000px,-1000px,-1000px,center; }
.TTP1000,.TTP1x00,.TTP10x0,.TTP100x,.TTP1x0x,.TTP1xx0,.TTP10xx,.TTP1xxx { background-position-y:center,-1000px,-1000px,-1000px,-1000px; }
.TTP0211,.TTPx211 { background-position-y:-1000px,-1000px,center,center,center; }
.TTP0210,.TTPx210,.TTP021x,.TTPx21x { background-position-y:-1000px,-1000px,center,center,-1000px; }
.TTP0201,.TTPx201,.TTP02x1,.TTPx2x1 { background-position-y:-1000px,-1000px,center,-1000px,center; }
.TTP0200,.TTPx200,.TTP02x0,.TTP020x,.TTPx2x0,.TTPx20x,.TTP02xx,.TTPx2xx { background-position-y:-1000px,-1000px,center,-1000px,-1000px; }
.TTP0111,.TTPx111 { background-position-y:-1000px,center,-1000px,center,center; }
.TTP0110,.TTPx110,.TTP011x,.TTPx11x { background-position-y:-1000px,center,-1000px,center,-1000px; }
.TTP0101,.TTPx101,.TTP01x1,.TTPx1x1 { background-position-y:-1000px,center,-1000px,-1000px,center; }
.TTP0100,.TTPx100,.TTP01x0,.TTP010x,.TTPx1x0,.TTPx10x,.TTP01xx,.TTPx1xx { background-position-y:-1000px,center,-1000px,-1000px,-1000px; }
.TTP0011,.TTPx011,.TTP0x11,.TTPxx11 { background-position-y:-1000px,-1000px,-1000px,center,center; }
.TTP0010,.TTPx010,.TTP0x10,.TTP001x,.TTPx01x,.TTPxx10,.TTP0x1x,.TTPxx1x { background-position-y:-1000px,-1000px,-1000px,center,-1000px; }
.TTP0001,.TTPx001,.TTP0x01,.TTP00x1,.TTPx0x1,.TTPxx01,.TTP0xx1,.TTPxxx1 { background-position-y:-1000px,-1000px,-1000px,-1000px,center; }

/* ------------- Space/Filter Panel checkbox images ------------- */

/* Special images in Filter, Group and Search rows for default panel (column named "Panel") if shown as the first column.
   @ Set width, height and background
   ...Filter0 - shown in Filter row when Filtered='0', ...Filter1 - shown in Filter row when Filtered='1'
   ...Group0 - shown in Group row when Grouped='0', ...Group1 - shown in Group row when Grouped='1'
   ...Search0 - shown in Search row when Searched='0', ...Search1 - shown in Search row when Searched='1'
*/
.TTFilter0,.TTFilter1,.TTGroup0,.TTGroup1,.TTSearch0,.TTSearch1 { background-position:center center; background-repeat:no-repeat; display:inline-block; }
.TTFilter0,.TTFilter1 { height:30px; background-size:15px 15px; width:15px; }
.TTWide .TTFilter0,.TTWide .TTFilter1 { background-size:20px 20px; width:20px; }
.TTHigh .TTFilter0,.TTHigh .TTFilter1 { height:40px; }
.TTBig .TTFilter0,.TTBig .TTFilter1 { height:50px; background-size:24px 24px; width:24px; }
.TTLow .TTFilter0,.TTLow .TTFilter1 { height:25px; background-size:13px 13px; width:13px; }
.TTSmall .TTFilter0,.TTSmall .TTFilter1 { height:20px; }
.TTTiny .TTFilter0,.TTTiny .TTFilter1 { height:17px; }
.TTFilter0,.TTGroup0,.TTSearch0 { background-image:url(Bool0.svg?v120); }
.TTFilter1,.TTGroup1,.TTSearch1 { background-image:url(Bool1.svg?v120); }
.TTGroup0,.TTGroup1,.TTSearch0,.TTSearch1 { height:26px; background-size:20px 20px; width:20px; } 
.TTWide .TTGroup0,.TTWide .TTGroup1,.TTWide .TTSearch0,.TTWide .TTSearch1 { background-size:24px 24px; width:24px; }
.TTHigh .TTGroup0,.TTHigh .TTGroup1,.TTHigh .TTSearch0,.TTHigh .TTSearch1 { height:30px; }
.TTBig .TTGroup0,.TTBig .TTGroup1,.TTBig .TTSearch0,.TTBig .TTSearch1 { height:34px; background-size:28px 28px; width:28px; } 
.TTGiant .TTGroup0,.TTGiant .TTGroup1,.TTGiant .TTSearch0,.TTGiant .TTSearch1 { height:38px; }
.TTLow .TTGroup0,.TTLow .TTGroup1,.TTLow .TTSearch0,.TTLow .TTSearch1 { height:20px; background-size:16px 16px; width:18px; }

/* ...PSpace... is shown in Group and Search row according to actual width of the Panel column. 
   @ Set here only width and text-align
*/
.TTMain .TTPSpace1 { width:29px; text-align:center; }
.TTMain .TTPSpace2 { width:53px; text-align:center; }
.TTMain .TTPSpace3 { width:77px; text-align:center; }
.TTMain .TTPSpace4 { width:101px; text-align:center; }
.TTHigh .TTPSpace1 { width:64px; }
.TTHigh .TTPSpace2 { width:98px; }
.TTHigh .TTPSpace3 { width:132px; }
.TTHigh .TTPSpace4 { width:166px; }
.TTLow .TTPSpace1 { width:24px; }
.TTLow .TTPSpace2 { width:43px; }
.TTLow .TTPSpace3 { width:62px; }
.TTLow .TTPSpace4 { width:81px; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                          Button type cell                                                     */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------- Button = "Tab" ------------- */

/* @ Set border, padding, background and text attributes
   ...TabHtmlBase is set to the Tab button <td> tag
   ...TabHtml is set to the Tab button <td> tag
   ...TabHtml1 is set to the Tab button <td> tag instead of ...TabHtml if the button value is 1
   ...TabHtmlIcon... is set instead of ...TabHtml... if the button has Icon
*/
.TTTabHtmlBase { }
.TTTabHtmlBase * { font-size:inherit; line-height:inherit; }
.TTTabHtml1,.TTTabHtmlIcon1 { }
 
/* Separators between Button="Tab", set to <td> tag 
   They are created automatically to separate the Tabs or can be created manually by Button="TabSep"
   @ Set background, border and padding or width
   ...TabSep is set to empty <td> tag between two Tab buttons
   ...TabSepLeft is set to empty <td> tag before Tab button
   ...TabSepRight is set to empty <td> tag after Tab button
   ...TabSepFirst is set to empty <td> tag before Tab button if it is the first cell
   ...TabSepLast is set to empty <td> tag after Tab button if it is the last cell
   ...TabSepNoBack is added to all Tab separators on row Kind="Tabber2"
*/
.TTMain .TTTabSep { width:0px; padding:0px; cursor:default!important; }
.TTMain .TTTabSepRight,.TTMain .TTTabSepLeft { padding:5px; width:5px; }
.TTTabSepLast { }
.TTTabSepFirst { }
.TTTabSepNoBack { }

/* ------------- Button = "Button" ------------- */

/* Parent of the <button> or <u>, it is set to cell <td> tag or inner <div> tag 
   @ Set background, border and padding
*/
.TTMain .TTToolButton { text-align:center; padding:0px 5px 0px 5px; overflow:hidden; }

/* Class set to the <button> tag if set <Cfg UseButton='1'> or to <u> tag if set <Cfg UseButton='0'>.
   @ Set background, border, margin, padding, height and text attributes
   ...ToolButtonButton is set in table row
   ...ToolButtonButton1 is set in table row instead if the button value is 1
   ...ToolButtonButtonAuto is added if the table cell has not set Width attribute
   ...ToolSpaceButton is set in Space row
   ...ToolSpaceButton1 is set in Space row instead if the button value is 1
   ...ToolSpaceButtonAuto is added if the Space cell has set Width="-1"
   ...Icon is added if the cell has set Icon attribute
   ...IconInner is set to the inner <i> tag with the icon and text if the cell has set Icon attribute
   ...Empty is added to button with empty text to preserve its height; @ Set height
*/
button.TTToolButtonButton,button.TTToolButtonButton1 { margin-top:5px; margin-bottom:5px; padding:1px 2px 1px 2px; line-height:14px; cursor:pointer; white-space:nowrap; display:block; color:inherit; }
.TTWide button.TTToolButtonButton,.TTWide button.TTToolButtonButton1 { margin-top:2px; margin-bottom:2px; line-height:inherit; }
.TTHigh button.TTToolButtonButton,.TTHigh button.TTToolButtonButton1 { margin-top:7px; margin-bottom:7px; }
.TTBig button.TTToolButtonButton,.TTBig button.TTToolButtonButton1 { margin-top:12px; margin-bottom:12px; }
.TTGiant button.TTToolButtonButton,.TTGiant button.TTToolButtonButton1 { margin-top:10px; margin-bottom:10px; }
.TTLow button.TTToolButtonButton,.TTLow button.TTToolButtonButton1 { margin-top:3px; margin-bottom:2px; }
.TTSmall button.TTToolButtonButton,.TTSmall button.TTToolButtonButton1 { margin-top:1px; margin-bottom:1px; padding-top:0px; padding-bottom:0px; }
.TTMini .TTDataRow button.TTToolButtonButton,.TTMini .TTDataRow button.TTToolButtonButton1 { line-height:11px; }
button.TTToolSpaceButton,button.TTToolSpaceButton1 { padding:4px 6px 4px 6px; cursor:pointer; white-space:nowrap; }
button.TTToolButtonButton1,button.TTToolSpaceButton1 { color:#00a194; font-weight:bold; }

u.TTToolButtonButton,u.TTToolButtonButton1,u.TTToolSpaceButton,u.TTToolSpaceButton1 { cursor:pointer; text-decoration:none; display:block; overflow:hidden; white-space:nowrap; }
u.TTToolButtonButton,u.TTToolButtonButton1 { margin:6px 1px 6px 1px; padding:0px 2px 0px 2px; }
.TTWide u.TTToolButtonButton,.TTWide u.TTToolButtonButton1 { margin-top:4px; margin-bottom:4px; }
.TTHigh u.TTToolButtonButton,.TTHigh u.TTToolButtonButton1 { margin-top:9px; margin-bottom:9px; }
.TTBig u.TTToolButtonButton,.TTBig u.TTToolButtonButton1 { margin-top:12px; margin-bottom:12px; padding-top:2px; padding-bottom:2px; }
.TTGiant u.TTToolButtonButton,.TTGiant u.TTToolButtonButton1 { padding-top:0px; padding-bottom:0px; }
.TTLow u.TTToolButtonButton,.TTLow u.TTToolButtonButton1 { margin-top:4px; margin-bottom:3px; }
.TTSmall u.TTToolButtonButton,.TTSmall u.TTToolButtonButton1 { margin-top:2px; margin-bottom:2px; line-height:14px; }
.TTMini .TTDataRow u.TTToolButtonButton,.TTMini .TTDataRow u.TTToolButtonButton1 { margin-top:1px; margin-bottom:1px; line-height:12px; }
.TTMain i.TTToolButtonIconInner { background-size:11px 11px; display:inline-block; font-style:normal; }
.TTHigh i.TTToolButtonIconInner { background-size:15px 15px; }
.TTSmall i.TTToolButtonIconInner { line-height:14px; }
.TTMini i.TTToolButtonIconInner { line-height:12px; }

u.TTToolSpaceButton,u.TTToolSpaceButton1,.TTMain .TTToolSpaceIconInner { padding:4px 7px 4px 7px; }
.TTMain u.TTToolSpaceIcon { padding-top:0px; padding-bottom:0px; }
.TTMain .TTToolSpaceIconInner { display:inline-block; font-style:normal; }
.TTWide .TTToolSpaceButton,.TTWide .TTToolSpaceButton1,.TTWide .TTToolSpaceIconInner { padding-top:2px; padding-bottom:2px; }
.TTHigh .TTToolSpaceButton,.TTHigh .TTToolSpaceButton1,.TTHigh .TTToolSpaceIconInner { padding:4px 10px 4px 10px; }
.TTBig .TTToolSpaceButton,.TTBig .TTToolSpaceButton1,.TTBig .TTToolSpaceIconInner { padding-top:6px; padding-bottom:6px; }
.TTLow .TTToolSpaceButton,.TTLow .TTToolSpaceButton1,.TTLow .TTToolSpaceIconInner { padding:1px 5px 1px 5px; }
.TTTiny .TTToolSpaceButton,.TTTiny .TTToolSpaceButton1,.TTTiny .TTToolSpaceIconInner { padding-left:3px; padding-right:3px; }

u.TTToolButtonButton1,u.TTToolSpaceButton1,u.TTToolButtonButton1:active,u.TTToolSpaceButton1:active { }
.TTToolButtonButtonAuto,.TTToolSpaceButtonAuto { }

.TTMain .TTToolButtonEmpty,.TTMain .TTToolSpaceEmpty { width:0px; overflow:hidden; display:inline-block; }
.TTMain .TTToolButtonEmpty { height:13px; }
.TTWide .TTToolButtonEmpty { height:18px; }
.TTHigh .TTToolButtonEmpty { height:20px; }
.TTGiant .TTToolButtonEmpty { height:22px; }
.TTMain .TTToolSpaceEmpty { height:19px; }
.TTGiant .TTToolSpaceEmpty { height:24px; }

/* ------------- Button = "Html" ------------- */

/* @ Set border, padding, background and text attributes
   ...ToolHtml is set to the button <td> tag
   ...ToolHtml1 is set to the button <td> tag instead if the button value is 1
   ...ToolHtmlIcon... is set instead if the button has Icon or is Class button
*/
.TTToolHtml,.TTToolHtml1 { padding-left:10px; padding-right:10px; }
.TTToolHtmlIcon,.TTToolHtmlIcon1 { }
.TTToolHtml1,.TTToolHtmlIcon1 { } 

/* Added to <td> or <div> tag when the cell has set Icon attribute, according to IconAlign value */
.TTToolHtmlIconLeft { text-align:left; }
.TTToolHtmlIconRight { text-align:right; }

/* Added to <td> tag, to button with empty text; @ Set border and padding */
.TTToolHtmlIconSingle { }

/* Added to <div> tag, to button with empty text to preserve its height; @ Set height */
.TTToolHtmlEmpty { height:16px; width:0px; overflow:hidden; display:inline-block; }
.TTWide .TTToolHtmlEmpty { height:20px; }
div.TTToolHtmlEmpty { display:block; }


/* ------------- Other Button type attributes ------------- */

/* Added to <td> tag when the Button type cell has set Disabled='1' */
.TTDisabledButton { opacity:0.3!important; }

/* Added to <td> tag when the Button type cell has set CanDelete='2' */
.TTButtonClose { background-size:16px 16px; padding-right:16px; background-image:url(SideClose.svg?v120); background-position:right top; background-repeat:no-repeat; border-right:1px solid white; }
.TTButtonClose.TTTabHtml1 { background-image:url(SideCloseActive.svg?v120); }
.TTLow .TTButtonClose { background-size:12px 12px; padding-right:10px; background-position:right top; }
.TTWide .TTButtonClose { background-size:20px 20px; padding-right:20px; }
.TTBig .TTButtonClose { background-size:24px 24px; padding-right:25px; }

/* Popup cell side icon, used for Button type cell with List attribute 
   @ Set background and padding
   ...PopupRight - right popup icon, used for PopupIcon="2" and for not empty value and PopupIcon="1"
   ...PopupLeft - not used now
   ...PopupNone - used for PopupIcon="1" and empty value, just to preserve the space
*/
.TTPopupLeft,.TTPopupRight { background-size:8px 8px; background-image:url(SidePopup.svg?v120); background-repeat:no-repeat; }
.TTTabHtml1 .TTPopupLeft,.TTTabHtml1 .TTPopupRight { background-image:url(SidePopupTab.svg?v120); }
.TTPopupLeft { background-position:-6px center; padding-left:14px; }
.TTRtl .TTPopupLeft { background-position:0px center; }
.TTPopupRight { background-position:right center; padding-right:14px; }
.TTPopupNone { padding-right:14px; }
.TTWide .TTPopupLeft { background-size:10px 10px; padding-left:16px; }
.TTWide .TTPopupRight { background-size:10px 10px; padding-right:16px; }
.TTBig .TTPopupLeft { background-size:12px 12px; padding-left:18px; }
.TTBig .TTPopupRight { background-size:12px 12px; padding-right:18px; }
.TTLow .TTPopupLeft { background-size:6px 6px; padding-left:12px; }
.TTLow .TTPopupRight { background-size:6px 6px; padding-right:12px; }


/* ------------------------------------------ Special Toolbar buttons' images ---------------------------------------------- */

/* Class added to <td> tag for alignment of the icon in Button="Class"
   ...Single is added for button without ButtonText to specify the icon width
   ...Left/Right/Top/Bottom is added for appropriate IconAlign value
   @ Set padding
*/
.TTMain .TTToolAlignSingle { background-size:36px 36px; padding-left:30px; padding-right:6px; background-position:center center; background-repeat:no-repeat; }
.TTWide .TTToolAlignSingle { background-size:48px 48px; padding-left:40px; }
.TTTiny .TTToolAlignSingle { background-size:24px 24px; padding-left:18px; }
.TTToolAlignSingle.TTHasLine { padding-left:0px; }
.TTMain .TTToolAlignLeft { background-size:36px 36px; padding-left:35px; padding-right:8px; background-position:left center; background-repeat:no-repeat; }
.TTWide .TTToolAlignLeft { background-size:48px 48px; padding-left:45px; }
.TTTiny .TTToolAlignLeft { background-size:24px 24px; padding-left:23px; }
.TTMain .TTToolAlignRight { background-size:36px 36px; padding-right:35px; padding-left:8px; background-position:right center; background-repeat:no-repeat; }
.TTWide .TTToolAlignRight { background-size:48px 48px; padding-right:45px; }
.TTTiny .TTToolAlignRight { background-size:24px 24px; padding-right:25px; }
.TTMain .TTToolAlignTop { background-size:36px 36px; padding:30px 5px 3px 5px; background-position:center top; background-repeat:no-repeat; }
.TTWide .TTToolAlignTop { background-size:48px 48px; padding-top:40px; }
.TTTiny .TTToolAlignTop { background-size:24px 24px; padding:20px 3px 0px 3px; }
.TTMain .TTToolAlignBottom { background-size:36px 36px; padding:5px 5px 30px 5px; background-position:center bottom -2px; background-repeat:no-repeat; }
.TTWide .TTToolAlignBottom { background-size:48px 48px; padding-bottom:40px; background-position:center bottom -4px; }
.TTTiny .TTToolAlignBottom { background-size:24px 24px; padding:0px 3px 20px 3px; }


/* Class added to <td> tag for alignment of the Underline line in Button="Class" or Button="Html"
   ...Single is added for button without ButtonText
   ...Left/Right/Top/Bottom is added for appropriate IconAlign value
   inside CellSpaceTool is for VAlign set 
   @ Set margin and width
*/
.TTToolLineAlignSingle { margin:13px 7px -17px 0px; height:0px; width:31px; }
.TTWide .TTToolLineAlignSingle { margin:16px 11px -20px 0px; width:42px; }
.TTLow .TTToolLineAlignSingle { margin-top:12px; margin-bottom:-16px; }
.TTSmall .TTToolLineAlignSingle { margin-top:11px; margin-bottom:-15px; }
.TTTiny .TTToolLineAlignSingle { margin-top:7px; margin-bottom:-11px; margin-right:4px; width:21px; }
.TTCellSpaceTool .TTToolLine { margin:29px 3px -33px 0px!important; }
.TTWide .TTCellSpaceTool .TTToolLine { margin:36px 3px -40px 0px!important; }
.TTTiny .TTCellSpaceTool .TTToolLine { margin:18px 3px -22px 0px!important; }
.TTToolLineAlignLeft { margin:21px 0px -25px -32px; height:0px; }
.TTToolLineAlignRight { margin:21px -32px -25px 0px; height:0px; }
.TTWide .TTToolLineAlignLeft { margin:26px 0px -30px -42px; }
.TTWide .TTToolLineAlignRight { margin:26px -42px -30px 0px; }
.TTTiny .TTToolLineAlignLeft { margin:15px 0px -19px -22px; }
.TTTiny .TTToolLineAlignRight { margin:15px -22px -19px 0px; }
.TTToolLineAlignTop { margin:-1px auto -3px auto; height:0px; }
.TTCellSpaceTool .TTToolLineAlignTop { margin-top:30px!important; margin-bottom:-34px!important; }
.TTWide .TTCellSpaceTool .TTToolLineAlignTop { margin-top:39px!important; margin-bottom:-43px!important; }
.TTTiny .TTCellSpaceTool .TTToolLineAlignTop { margin-top:19px!important; margin-bottom:-23px!important; }
.TTToolLineAlignBottom { margin:42px auto -46px auto; height:0px; }
.TTWide .TTToolLineAlignBottom { margin-top:56px; margin-bottom:-60px; }
.TTGiant .TTToolLineAlignBottom { margin-top:60px; margin-bottom:-64px; }
.TTTiny .TTToolLineAlignBottom { margin-top:32px; margin-bottom:-36px; }
.TTCellSpaceTool .TTToolLineAlignBottom { margin:47px 3px -51px 0px!important; }
.TTWide .TTCellSpaceTool .TTToolLineAlignBottom { margin:61px 3px -65px 0px!important; }
.TTGiant .TTCellSpaceTool .TTToolLineAlignBottom { margin:65px 3px -69px 0px!important; }
.TTLow .TTCellSpaceTool .TTToolLineAlignBottom { margin:47px 3px -51px 0px!important; }
.TTTiny .TTCellSpaceTool .TTToolLineAlignBottom { margin:32px 3px -36px 0px!important; }
.TTToolLineAlignText { margin:17px auto -21px auto; height:0px; }
.TTWide .TTToolLineAlignText { margin-top:19px; margin-bottom:-23px; }
.TTGiant .TTToolLineAlignText { margin-top:24px; margin-bottom:-28px; }
.TTTiny .TTToolLineAlignText { margin-top:15px; margin-bottom:-19px; }


/* Class set to <div> tag with Underline line in Button="Class" or Button="Html"
   ...ToolLine is set for all Underline lines
   The number is the UnderlineStyle. ...None is for UnderLineStyle = null, ...Empty for UnderLineStyle=""
   @ Set border and padding
*/
.TTToolLine { }
.TTToolLineNone { border-bottom:4px solid; padding-top:0px; }
.TTToolLineEmpty { border-bottom:1px solid #D4D4D4!important; padding-top:2px; }
.TTToolLine0 { border-bottom:0px none; padding-top:3px; }
.TTToolLine1 { border-bottom:1px solid; padding-top:2px; }
.TTToolLine2 { border-bottom:2px solid; padding-top:2px; }
.TTToolLine3 { border-bottom:3px solid; padding-top:1px; }
.TTToolLine4 { border-bottom:1px dotted; padding-top:2px; }
.TTToolLine5 { border-bottom:2px dotted; padding-top:2px; }
.TTToolLine6 { border-bottom:1px dashed; padding-top:2px; }
.TTToolLine7 { border-bottom:2px dashed; padding-top:2px; }

/* Used for Type="Button" Button="Class" and cell value null, "", 0 or 1. Set to <td> tag
   @ Set border, padding, background
*/
.TTToolSave { background-image:url(ButtonSave.svg?v120); }
.TTToolReload { background-image:url(ButtonReload.svg?v120); }
.TTToolRepaint { background-image:url(ButtonRepaint.svg?v120); }
.TTToolRepaint1 { background-image:url(ButtonPaging.svg?v120); }
.TTToolPrint { background-image:url(ButtonPrint.svg?v120); }
.TTToolExportPDF { background-image:url(ButtonExportPDF.svg?v120); }
.TTToolExport { background-image:url(ButtonExport.svg?v120); }
.TTToolImport { background-image:url(ButtonImport.svg?v120); }
.TTToolUndo,.TTToolUndo1 { background-image:url(ButtonUndo.svg?v120); }
.TTToolRedo,.TTToolRedo1 { background-image:url(ButtonRedo.svg?v120); }
.TTToolUndo,.TTToolRedo { opacity:0.3; }
.TTToolAdd { background-image:url(ButtonAdd.svg?v120); }
.TTToolAddChild { background-image:url(ButtonAddChild.svg?v120); }
.TTToolAddCol { background-image:url(ButtonAddCol.svg?v120); }
.TTToolJoin { background-image:url(ButtonJoin.svg?v120); }
.TTToolSplit { background-image:url(ButtonSplit.svg?v120); }
.TTToolOutdent { background-image:url(ButtonOutdent.svg?v120); }
.TTToolIndent { background-image:url(ButtonIndent.svg?v120); }
.TTToolSort,.TTToolSort1 { background-image:url(ButtonSort.svg?v120); }
.TTToolCalc,.TTToolCalc1 { background-image:url(ButtonCalc.svg?v120); }
.TTToolSort,.TTToolCalc { opacity:0.3; }
.TTToolWinScroll { background-image:url(ButtonWinScroll.svg?v120); }
.TTToolWinScroll1 { background-image:url(ButtonGridScroll.svg?v120); }
.TTToolExpandAll { background-image:url(ButtonExpandAll.svg?v120); }
.TTToolCollapseAll { background-image:url(ButtonCollapseAll.svg?v120); }
.TTToolColumns { background-image:url(ButtonColumns.svg?v120); }
.TTToolCfg { background-image:url(ButtonCfg.svg?v120); }
.TTToolLock { background-image:url(ButtonLock.svg?v120); }
.TTToolLock1 { background-image:url(ButtonLock1.svg?v120); }
.TTToolLock2 { background-image:url(ButtonLock2.svg?v120); }
.TTToolLock3 { background-image:url(ButtonLock3.svg?v120); }
.TTToolHelp { background-image:url(ButtonHelp.svg?v120); }
.TTToolDebug { background-image:url(ButtonDebug.svg?v120); }
.TTResizeGrid { background-image:url(ButtonResizeGrid.svg?v120); }
.TTResizeGridRtl { background-image:url(ButtonResizeGridRtl.svg?v120); }
.TTToolPagerFirst,.TTToolPagerFirst1 { background-image:url(PagerFirst.svg?v120); }
.TTToolPagerPrev,.TTToolPagerPrev1 { background-image:url(PagerPrev.svg?v120); }
.TTToolPagerNext,.TTToolPagerNext1 { background-image:url(PagerNext.svg?v120); }
.TTToolPagerLast,.TTToolPagerLast1 { background-image:url(PagerLast.svg?v120); }
.TTToolPagerFirst,.TTToolPagerPrev,.TTToolPagerNext,.TTToolPagerLast { opacity:0.3; }
.TTToolCorrect { background-image:url(ButtonCorrect.svg?v120); }
.TTToolCorrect1 { background-image:url(ButtonCorrectErrors.svg?v120); } 
.TTToolZoomIn,.TTToolZoomIn1 { background-image:url(ButtonZoomIn.svg?v120); }
.TTToolZoomOut,.TTToolZoomOut1 { background-image:url(ButtonZoomOut.svg?v120); }
.TTToolZoomIn,.TTToolZoomOut { opacity:0.3; }
.TTToolZoomFit { background-image:url(ButtonZoomFit.svg?v120); }
.TTToolLeft { background-image:url(ButtonAlignLeft.svg?v120); }
.TTToolLeft1 { background-image:url(ButtonAlignLeft1.svg?v120); }
.TTToolCenter { background-image:url(ButtonAlignCenter.svg?v120); }
.TTToolCenter1 { background-image:url(ButtonAlignCenter1.svg?v120); }
.TTToolRight { background-image:url(ButtonAlignRight.svg?v120); }
.TTToolRight1 { background-image:url(ButtonAlignRight1.svg?v120); }
.TTToolTop { background-image:url(ButtonAlignTop.svg?v120); } 
.TTToolTop1 { background-image:url(ButtonAlignTop1.svg?v120); } 
.TTToolMiddle { background-image:url(ButtonAlignMiddle.svg?v120); } 
.TTToolMiddle1 { background-image:url(ButtonAlignMiddle1.svg?v120); } 
.TTToolBottom { background-image:url(ButtonAlignBottom.svg?v120); }
.TTToolBottom1 { background-image:url(ButtonAlignBottom1.svg?v120); }
.TTToolBold { background-image:url(ButtonTextBold.svg?v120); }
.TTToolBold1 { background-image:url(ButtonTextBold1.svg?v120); }
.TTToolItalic { background-image:url(ButtonTextItalic.svg?v120); }
.TTToolItalic1 { background-image:url(ButtonTextItalic1.svg?v120); }
.TTToolUnderline { background-image:url(ButtonTextUnderline.svg?v120); }
.TTToolUnderline1 { background-image:url(ButtonTextUnderline1.svg?v120); }
.TTToolStrike { background-image:url(ButtonTextStrike.svg?v120); } 
.TTToolStrike1 { background-image:url(ButtonTextStrike1.svg?v120); } 
.TTToolRotateLeft { background-image:url(ButtonRotateLeft.svg?v120); }
.TTToolRotateLeft1 { background-image:url(ButtonRotateLeft1.svg?v120); }
.TTToolNoRotate { background-image:url(ButtonNoRotate.svg?v120); }
.TTToolNoRotate1 { background-image:url(ButtonNoRotate1.svg?v120); }
.TTToolRotateRight { background-image:url(ButtonRotateRight.svg?v120); }
.TTToolRotateRight1 { background-image:url(ButtonRotateRight1.svg?v120); }
.TTToolWrapText { background-image:url(ButtonWrapText.svg?v120); }
.TTToolWrapText1 { background-image:url(ButtonWrapText1.svg?v120); }
.TTToolAddImage { background-image:url(ButtonAddImage.svg?v120); }
.TTToolSetLink { background-image:url(ButtonSetLink.svg?v120); }
.TTToolClearStyle { background-image:url(ButtonClearStyle.svg?v120); }

.TTToolColorText { background-image:url(ButtonColorText.svg?v120),url(ButtonPopup.svg); } 
.TTToolColorBackground { background-image:url(ButtonColorBackground.svg?v120),url(ButtonPopup.svg); }
.TTToolColorShadow { background-image:url(ButtonColorShadow.svg?v120),url(ButtonPopup.svg); }
.TTToolBorder { background-image:url(ButtonBorder.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderAll { background:url(ButtonBorderAll.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO15 { background:url(ButtonBorderOut15.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderI3 { background:url(ButtonBorderIn3.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderI2 { background:url(ButtonBorderIn2.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderI1 { background:url(ButtonBorderIn1.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO1 { background:url(ButtonBorderOut1.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO2 { background:url(ButtonBorderOut2.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO4 { background:url(ButtonBorderOut4.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO8 { background:url(ButtonBorderOut8.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO5 { background:url(ButtonBorderOut5.svg?v120),url(ButtonPopup.svg); }
.TTToolBorderO10 { background:url(ButtonBorderOut10.svg?v120),url(ButtonPopup.svg); }
.TTToolColorText,.TTToolColorBackground,.TTToolColorShadow,.TTToolBorder { background-position:left center,right center!important; }
.TTToolImage.TTToolColorText,.TTToolImage.TTToolColorBackground,.TTToolImage.TTToolColorShadow,.TTToolImage.TTToolBorder { padding-left:38px; }
.TTWide .TTToolImage.TTToolColorText,.TTWide .TTToolImage.TTToolColorBackground,.TTWide .TTToolImage.TTToolColorShadow,.TTWide .TTToolImage.TTToolBorder { padding-left:52px; }
.TTToolColorTextLeft,.TTToolColorBackgroundLeft,.TTToolColorShadowLeft,.TTToolBorderLeft { padding-right:20px!important; }
.TTToolColorTextRight,.TTToolColorBackgroundRight,.TTToolColorShadowRight,.TTToolBorderRight { background-position:right 11px center,right center!important; padding-right:50px!important; }
.TTWide .TTToolColorTextRight,.TTWide .TTToolColorBackgroundRight,.TTWide .TTToolColorShadowRight,.TTWide .TTToolBorderRight { padding-right:60px!important; }
.TTToolColorTextTop,.TTToolColorBackgroundTop,.TTToolColorShadowTop,.TTToolBorderTop { background-position:center top,right top!important; min-width:40px; }
.TTWide .TTToolColorTextTop,.TTWide .TTToolColorBackgroundTop,.TTWide .TTToolColorShadowTop,.TTWide .TTToolBorderTop { min-width:55px; }
.TTToolColorTextBottom,.TTToolColorBackgroundBottom,.TTToolColorShadowBottom,.TTToolBorderBottom { background-position:center bottom -2px,right bottom -2px!important; min-width:40px; }
.TTWide .TTToolColorTextBottom,.TTWide .TTToolColorBackgroundBottom,.TTWide .TTToolColorShadowBottom,.TTWide .TTToolBorderBottom { background-position:center -3px bottom -4px,right bottom -4px!important; min-width:55px; }
.TTSmall .TTToolAlignSingle.TTToolColorText,.TTSmall .TTToolAlignSingle.TTToolColorBackground,.TTSmall .TTToolAlignSingle.TTToolColorShadow,.TTSmall .TTToolAlignSingle.TTToolBorder { background-size:32px 32px; }
.TTTiny .TTToolAlignSingle.TTToolColorText,.TTTiny .TTToolAlignSingle.TTToolColorBackground,.TTTiny .TTToolAlignSingle.TTToolColorShadow,.TTTiny .TTToolAlignSingle.TTToolBorder { background-size:20px 20px; }

.TTMain .TTToolLanguages { opacity:0.6; padding-left:60px; background-size:40px 40px,40px 40px; background-position:6px center,right calc(50% - 1px)!important; }
.TTWide .TTToolLanguages { background-size:52px 52px,52px 52px; padding-left:76px; }
.TTTiny .TTToolLanguages { background-size:24px 24px,24px 24px; padding-left:36px; }
.TTToolLangBR { background-image:url(FlagBR.svg?v120),url(ButtonPopup.svg); }
.TTToolLangCA { background-image:url(FlagCA.svg?v120),url(ButtonPopup.svg); }
.TTToolLangCN { background-image:url(FlagCN.svg?v120),url(ButtonPopup.svg); }
.TTToolLangCS { background-image:url(FlagCZ.svg?v120),url(ButtonPopup.svg); }
.TTToolLangDE { background-image:url(FlagDE.svg?v120),url(ButtonPopup.svg); }
.TTToolLangEN { background-image:url(FlagUS26.svg?v120),url(ButtonPopup.svg); }
.TTWide .TTToolLangEN { background-image:url(FlagUS33.svg?v120),url(ButtonPopup.svg); }
.TTTiny .TTToolLangEN { background-image:url(FlagUS16.svg?v120),url(ButtonPopup.svg); }
.TTToolLangES { background-image:url(FlagES.svg?v120),url(ButtonPopup.svg); }
.TTToolLangFA { background-image:url(FlagIR.svg?v120),url(ButtonPopup.svg); }
.TTToolLangFR { background-image:url(FlagFR.svg?v120),url(ButtonPopup.svg); }
.TTToolLangGB { background-image:url(FlagGB.svg?v120),url(ButtonPopup.svg); }
.TTToolLangHR { background-image:url(FlagHR.svg?v120),url(ButtonPopup.svg); }
.TTToolLangIT { background-image:url(FlagIT.svg?v120),url(ButtonPopup.svg); }
.TTToolLangJP { background-image:url(FlagJP.svg?v120),url(ButtonPopup.svg); }
.TTToolLangKR { background-image:url(FlagKR.svg?v120),url(ButtonPopup.svg); }
.TTToolLangNL { background-image:url(FlagNL.svg?v120),url(ButtonPopup.svg); }
.TTToolLangRU { background-image:url(FlagRU.svg?v120),url(ButtonPopup.svg); }
.TTToolLangPT { background-image:url(FlagPT.svg?v120),url(ButtonPopup.svg); }
.TTToolLangXX { background-image:url(FlagXX.svg?v120),url(ButtonPopup.svg); }
.TTMain .TTToolLanguagesSingle { opacity:0.4; margin:-3px -4px -3px 4px; padding-left:37px; height:26px; background-repeat:no-repeat; background-size:40px 40px,40px 40px; background-position:left center; }
.TTWide .TTToolLanguagesSingle { background-size:52px 52px,52px 52px; padding-left:50px; height:33px; }
.TTTiny .TTToolLanguagesSingle { background-size:24px 24px,24px 24px; padding-left:22px; margin:-3px -2px -3px 2px; }
.TTToolHtml1 .TTToolLanguagesSingle { opacity:1; }

/* Void button ResizeGrid; @ Do not change */
.TTToolResize { visibility:hidden; }

/* It is added to the td tag when used VAlign and no button text is shown */
.TTMain .TTToolImage { display:inline-block; height:30px; width:0px; overflow:hidden; }
.TTWide .TTToolImage { height:40px; }
.TTTiny .TTToolImage { height:22px; }

/* It is added to the td tag when used VAlign and the button text is shown; for IconAlign values */
.TTToolImageLeftText,.TTToolImageRightText,.TTToolImageTopText,.TTToolImageBottomText { display:inline-block; text-decoration:none; }
.TTToolImageLeftText,.TTToolImageRightText { line-height:26px; }
.TTHigh .TTToolImageLeftText,.TTHigh .TTToolImageRightText { line-height:30px; }
.TTBig .TTToolImageLeftText,.TTBig .TTToolImageRightText { line-height:34px; }
.TTLow .TTToolImageLeftText,.TTLow .TTToolImageRightText { line-height:20px; }

/* It is added to div tag when used Icon attribute with Button="Class"; for IconAlign values; Single is used without ButtonText; */
.TTToolIconSingle { background-position:center center; }
.TTToolIconLeft { background-position:left center; }
.TTToolIconRight { background-position:right center; }
.TTToolIconTop { background-position:center top; }
.TTToolIconBottom { background-position:center bottom; }

/* Special class added to <td> tag for Pager type cell edit box with pager number - it is standard editable Space cell */
.TTPagerEdit > div { text-align:center; }

/* Special icon always placed to right bottom grid corner to resize grid if set ResizingMain 
   @ Set background and optionally margin, width and height for the icon size and position
   ...Rtl is placed in bottom left corner and is used in RTL mode
*/
.TTResizeGrid,.TTResizeGridRtl { margin:-17px 0px 0px auto; height:17px; width:17px; overflow:hidden; padding:0px; cursor:nw-resize; background:url(ButtonResizeGrid.svg?v120) 0px 0px no-repeat; background-size:17px 17px; position:relative; }
.TTResizeGridRtl { margin-left:0px; margin-right:auto; cursor:ne-resize; background:url(ButtonResizeGridRtl.svg?v120) 0px 0px no-repeat; }
.TTWide .TTResizeGrid,.TTWide .TTResizeGridRtl { margin-top:-25px; height:25px; width:25px; background-size:25px 25px; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                 Cell side Icon / Button                                                       */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------ Side button images ----------------------------------------------------- */

/* Predefined side icon and side button images.
   The ...Left is used for Icon with IconAlign="Left" or without IconAlign
   The ...Right is used for Icon with IconAlign="Right" and for Button
   The ...Top and ...Bottom is used for Type="Button" with Icon and IconAlign="Top" or "Bottom"
   The ...Check0... is not checked, ...Check1... is checked and ...Check2... is empty state (the ?)
   @ Set here background and padding
 */
.TTMain .TTSideLeft,.TTMain .TTSideRight,.TTMain .TTSideTop,.TTMain .TTSideBottom { background-size:15px 15px; background-repeat:no-repeat; }
.TTWide .TTSideLeft,.TTWide .TTSideRight,.TTWide .TTSideTop,.TTWide .TTSideBottom { background-size:20px 20px; }
.TTBig .TTSideLeft,.TTBig .TTSideRight,.TTBig .TTSideTop,.TTBig .TTSideBottom { background-size:24px 24px; }
.TTLow .TTSideLeft,.TTLow .TTSideRight,.TTLow .TTSideTop,.TTLow .TTSideBottom { background-size:13px 13px; }
.TTMain .TTSideLeft { padding-left:25px; background-position:5px center; }
.TTWide .TTSideLeft { padding-left:30px; }
.TTBig .TTSideLeft { padding-left:45px; background-position:10px center; }
.TTLow .TTSideLeft { padding-left:20px; background-position:3px center; }
.TTMain .TTSideRight { padding-right:25px; background-position:right 5px center; }
.TTWide .TTSideRight { padding-right:30px; }
.TTBig .TTSideRight { padding-right:45px; background-position:right 10px center; }
.TTLow .TTSideRight { padding-right:20px; background-position:right 2px center; }
.TTMain .TTSideTop { padding-top:15px; background-position:center top; }
.TTWide .TTSideTop { padding-top:20px; }
.TTBig .TTSideTop { padding-top:25px; }
.TTMain .TTSideBottom { padding-bottom:15px; background-position:center bottom; }
.TTWide .TTSideBottom { padding-bottom:20px; }
.TTBig .TTSideBottom { padding-bottom:25px; }
.TTMain .TTDateLeft,.TTMain .TTDatesLeft,.TTMain .TTDateRight,.TTMain .TTDatesRight,.TTMain .TTDateTop,.TTMain .TTDatesTop,.TTMain .TTDateBottom,.TTMain .TTDatesBottom { background-image:url(SideDate.svg?v120); background-size:14px 14px; }
.TTWide .TTDateRight,.TTWide .TTDatesRight,.TTWide .TTDateLeft,.TTWide .TTDatesLeft { background-image:url(SideDateSmall.svg?v120); background-size:20px 20px; }
.TTBig .TTDateRight,.TTBig .TTDatesRight,.TTBig .TTDateLeft,.TTBig .TTDatesLeft { background-image:url(SideDate.svg?v120); background-size:24px 24px; }
.TTLow .TTDateRight,.TTLow .TTDatesRight,.TTLow .TTDateLeft,.TTLow .TTDatesLeft { background-image:url(SideDate.svg?v120); background-size:12px 12px; }
.TTDefaultsLeft,.TTDefaultsRight,.TTDefaultsTop,.TTDefaultsBottom { background-image:url(SideDefaults.svg?v120); }
.TTEnumLeft,.TTEnumRight,.TTEnumTop,.TTEnumBottom { background-image:url(SideEnum.svg?v120); }
.TTFileLeft,.TTFileRight,.TTFileTop,.TTFileBottom { background-image:url(SideFile.svg?v120); }
.TTClearLeft,.TTClearRight,.TTClearTop,.TTClearBottom { background-image:url(SideClear.svg?v120); }
.TTCheck0Left,.TTCheck0Right,.TTCheck0Top,.TTCheck0Bottom { background-image:url(SideBool0.svg?v120); }
.TTCheck1Left,.TTCheck1Right,.TTCheck1Top,.TTCheck1Bottom { background-image:url(SideBool1.svg?v120); }
.TTCheck2Left,.TTCheck2Right,.TTCheck2Top,.TTCheck2Bottom { background-image:url(SideBoolEmpty.svg?v120); }

.TTExpandLeft,.TTExpandRight,.TTExpandTop,.TTExpandBottom,.TTExpandRevLeft,.TTExpandRevRight,.TTExpandRevTop,.TTExpandRevBottom,
.TTExpandColLeft,.TTExpandColRight,.TTExpandColTop,.TTExpandColBottom,.TTExpandColRevLeft,.TTExpandColRevRight,.TTExpandColRevTop,.TTExpandColRevBottom { background-image:url(SideExpand.svg?v120); }
.TTExpandTreeLeft,.TTExpandTreeRight,.TTExpandTreeTop,.TTExpandTreeBottom,.TTExpandTreeRevLeft,.TTExpandTreeRevRight,.TTExpandTreeRevTop,.TTExpandTreeRevBottom,
.TTExpandColTreeLeft,.TTExpandColTreeRight,.TTExpandColTreeTop,.TTExpandColTreeBottom,.TTExpandColTreeRevLeft,.TTExpandColTreeRevRight,.TTExpandColTreeRevTop,.TTExpandColTreeRevBottom { background-image:url(TreeExpand.svg?v120); }
.TTCollapseLeft,.TTCollapseRight,.TTCollapseTop,.TTCollapseBottom,.TTCollapseRevLeft,.TTCollapseRevRight,.TTCollapseRevTop,.TTCollapseRevBottom,
.TTCollapseColLeft,.TTCollapseColRight,.TTCollapseColTop,.TTCollapseColBottom,.TTCollapseColRevLeft,.TTCollapseColRevRight,.TTCollapseColRevTop,.TTCollapseColRevBottom { background-image:url(SideCollapse.svg?v120); }
.TTCollapseTreeLeft,.TTCollapseTreeRight,.TTCollapseTreeTop,.TTCollapseTreeBottom,.TTCollapseTreeRevLeft,.TTCollapseTreeRevRight,.TTCollapseTreeRevTop,.TTCollapseTreeRevBottom { background-image:url(TreeCollapse.svg?v120); }
.TTMain .TTCollapseColTreeLeft,.TTMain .TTCollapseColTreeRight,.TTMain .TTCollapseColTreeTop,.TTMain .TTCollapseColTreeBottom { 
   background-image:url(TreeCollapse.svg?v120),url(TreeHLine.svg),url(TreeVLine.svg); background-size:15px 15px,calc(100% - 20px) 1px,1.1px calc(50% - 4px); background-position:5px center,13px 50%,right 6px bottom 4px;
   }
.TTWide .TTCollapseColTreeLeft,.TTWide .TTCollapseColTreeRight,.TTWide .TTCollapseColTreeTop,.TTWide .TTCollapseColTreeBottom { background-size:20px 20px,calc(100% - 24px) 1px,1.1px calc(50% - 4px); background-position:5px center,13px 50%,right 10px bottom 4px; }
.TTBig .TTCollapseColTreeLeft,.TTBig .TTCollapseColTreeRight,.TTBig .TTCollapseColTreeTop,.TTBig .TTCollapseColTreeBottom { background-size:24px 24px,calc(100% - 24px) 1px,1.1px calc(50% - 4px); }
.TTLow .TTCollapseColTreeLeft,.TTLow .TTCollapseColTreeRight,.TTLow .TTCollapseColTreeTop,.TTLow .TTCollapseColTreeBottom { background-size:13px 13px,calc(100% - 20px) 1px,1.1px calc(50% - 4px); }
.TTMain .TTCollapseColTreeRevLeft,.TTMain .TTCollapseColTreeRevRight,.TTMain .TTCollapseColTreeRevTop,.TTMain .TTCollapseColTreeRevBottom { 
   background-image:url(TreeCollapse.svg?v120),url(TreeHLine.svg),url(TreeVLine.svg); background-size:15px 15px,calc(100% - 20px) 1px,1.1px calc(50% - 4px); background-position:right 4px center,6px 50%,left 6px bottom 4px;
   }
.TTWide .TTCollapseColTreeRevLeft,.TTWide .TTCollapseColTreeRevRight,.TTWide .TTCollapseColTreeRevTop,.TTWide .TTCollapseColTreeRevBottom { background-size:20px 20px,calc(100% - 28px) 1px,1.1px calc(50% - 4px); background-position:right 4px center,14px 50%,left 14px bottom 4px; }
.TTBig .TTCollapseColTreeRevLeft,.TTBig .TTCollapseColTreeRevRight,.TTBig .TTCollapseColTreeRevTop,.TTBig .TTCollapseColTreeRevBottom { background-size:24px 24px,calc(100% - 28px) 1px,1.1px calc(50% - 4px); }
.TTLow .TTCollapseColTreeRevLeft,.TTLow .TTCollapseColTreeRevRight,.TTLow .TTCollapseColTreeRevTop,.TTLow .TTCollapseColTreeRevBottom { background-size:13px 13px,calc(100% - 20px) 1px,1.1px calc(50% - 4px); }
 
/* Class added to right side button if shown in <u> tag - in Header cell or if the cell has set VAlign 
   @ Set here only height
*/
.TTMain .TTButtonImage { height:30px; display:block; padding-left:0px; padding-right:0px; }
.TTHigh .TTButtonImage { height:40px; }
.TTBig .TTButtonImage { height:50px; }
.TTLow .TTButtonImage { height:20px; }
.TTMini .TTButtonImage { height:17px; }

/* Class added to <a> tag in Type="Icon" and Link attribute set. @ Do not change. */
.TTIconLink { text-decoration:none; width:1000px; display:inline-block; }

/* Class added to td tag in Type="Icon" and Range attribute set. margin used because of not yet loaded images */
.TTIconRange { line-height:0px; }
.TTIconRange img { display:inline-block; margin-top:-10px; margin-bottom:-10px; }
.TTVAlignTop .TTIconRange img { margin-top:0px; margin-bottom:-20px; }
.TTVAlignBottom .TTIconRange img { margin-top:-20px; margin-bottom:0px; }

/* Class added to the <td> or <div> tag when set custom Icon as icon file, with the suffix as IconAlign. @ Set padding */
.TTIconLeft { background-position:left center; padding-left:25px; background-repeat:no-repeat; }
.TTWide .TTIconLeft { padding-left:30px; }
.TTHigh .TTIconLeft { padding-left:45px; }
.TTLow .TTIconLeft { padding-left:20px; }
.TTIconRight { background-position:right center; padding-right:25px; background-repeat:no-repeat; }
.TTWide .TTIconRight { padding-right:30px; }
.TTHigh .TTIconRight { padding-right:45px; }
.TTLow .TTIconRight { padding-right:20px; }
.TTIconCenter { background-position:center center; background-repeat:no-repeat; }
.TTIconTop { padding-top:20px; background-position:center 0px; background-repeat:no-repeat; }
.TTIconBottom { padding-bottom:21px; background-position:center 20px; background-repeat:no-repeat; }
.TTIconCover { background-size:cover; }
.TTIconContain { background-size:contain; }
.TTIconFill { background-size:100% 100%; }

/* Class added to the <td> or <div> tag when set custom Icon as icon file, with the suffix as IconAlign="Top or "Bottom and VAlign. 
   Used to synchronize position of custom icons with standard toolbar icons
   @ Set padding and margin 
*/
.TTIconTopVAlignTop { padding-top:20px; }
.TTIconTopVAlignMiddle { padding-top:21px; }
.TTIconTopVAlignBottom { padding-top:22px; }
.TTIconBottomVAlignTop { padding-bottom:22px; }
.TTIconBottomVAlignMiddle { padding-bottom:21px; }
.TTIconBottomVAlignBottom { padding-bottom:21px; }

/* -------------------------------------------------- Filter images -------------------------------------------------------- */

/* Filter operator icons shown on left or right side (set by IconAlign), shown in <td> or <div> tag.
   The number 0 - 12 is the operator number set in cell Filter attribute
   @ Set here background and padding-left
*/
.TTFilterLeft { }
.TTFilterRight { }
.TTFilter0Left,.TTFilter0Right,.TTFilter0Menu { background-image:url(Filter0.svg?v120); }
.TTFilter1Left,.TTFilter1Right,.TTFilter1Menu { background-image:url(Filter1.svg?v120); }
.TTFilter2Left,.TTFilter2Right,.TTFilter2Menu { background-image:url(Filter2.svg?v120); }
.TTFilter3Left,.TTFilter3Right,.TTFilter3Menu { background-image:url(Filter3.svg?v120); }
.TTFilter4Left,.TTFilter4Right,.TTFilter4Menu { background-image:url(Filter4.svg?v120); }
.TTFilter5Left,.TTFilter5Right,.TTFilter5Menu { background-image:url(Filter5.svg?v120); }
.TTFilter6Left,.TTFilter6Right,.TTFilter6Menu { background-image:url(Filter6.svg?v120); }
.TTFilter7Left,.TTFilter7Right,.TTFilter7Menu { background-image:url(Filter7.svg?v120); }
.TTFilter8Left,.TTFilter8Right,.TTFilter8Menu { background-image:url(Filter8.svg?v120); }
.TTFilter9Left,.TTFilter9Right,.TTFilter9Menu { background-image:url(Filter9.svg?v120); }
.TTFilter10Left,.TTFilter10Right,.TTFilter10Menu { background-image:url(Filter10.svg?v120); }
.TTFilter11Left,.TTFilter11Right,.TTFilter11Menu { background-image:url(Filter11.svg?v120); }
.TTFilter12Left,.TTFilter12Right,.TTFilter12Menu { background-image:url(Filter12.svg?v120); }

/* The filter operator icons shown in the popup menu 
   @ Set here background, width and height
*/
.TTFilterAllMenu { background-size:15px 15px; width:23px; height:16px; overflow:hidden; background-repeat:no-repeat; }
.TTWide .TTFilterAllMenu { background-size:20px 20px; width:29px; height:20px; }
.TTBig .TTFilterAllMenu { background-size:24px 24px; width:35px; height:24px; }
.TTLow .TTFilterAllMenu { background-size:13px 13px; width:20px; height:13px; }

/* ...FilterXValue is added to the filter cell according to the filter operator, X = 0 - 12
   @ Set here text attributes
*/
.TTFilter0Value { }

/* --------------------------------------------------- Sort images --------------------------------------------------------- */

/* Sort icons shown on left or right side (set by IconAlign) in Header cell, shown in <td> or <div> tag.
   0 - no sort, 1 - first sort asc, 2 - second sort asc, 3 - third sort asc, 4 - first sort desc, 5 - second sort desc, 6 - third sort desc
   @ Set here background and padding-left
*/
.TTMain .TTSortLeft { background-size:30px 30px; background-position:-3px center; background-repeat:no-repeat; }
.TTMain .TTSortRight { background-size:30px 30px; background-position:right -3px center; background-repeat:no-repeat; }
.TTWide .TTSortLeft { background-position:left center; }
.TTWide .TTSortRight { background-position:right center; }
.TTHigh .TTSortLeft { background-size:40px 40px; }
.TTHigh .TTSortRight { background-size:40px 40px; }
.TTBig .TTSortLeft { background-size:50px 50px; }
.TTBig .TTSortRight { background-size:50px 50px; }
.TTLow .TTSortLeft { background-position:left center; background-size:20px 20px; }
.TTLow .TTSortRight { background-position:right center; background-size:20px 20px; }
.TTTiny .TTSortLeft { background-size:15px 15px; }
.TTTiny .TTSortRight { background-size:15px 15px; }

.TTSort0Left,.TTSort0Right { background-image:url(SortNone.svg?v120); }
.TTSort1Left,.TTSort1Right { background-image:url(SortDesc0.svg?v120); }
.TTSort2Left,.TTSort2Right { background-image:url(SortDesc1.svg?v120); }
.TTSort3Left,.TTSort3Right { background-image:url(SortDesc2.svg?v120); }
.TTSort4Left,.TTSort4Right { background-image:url(SortAsc0.svg?v120); }
.TTSort5Left,.TTSort5Right { background-image:url(SortAsc1.svg?v120); }
.TTSort6Left,.TTSort6Right { background-image:url(SortAsc2.svg?v120); }

.TTSortN0Left,.TTSortN0Right { background-image:url(SortNone.svg?v120); }
.TTSortN1ALeft,.TTSortN1ARight { background-image:url(SortAscN1.svg?v120); }
.TTSortN2ALeft,.TTSortN2ARight { background-image:url(SortAscN2.svg?v120); }
.TTSortN3ALeft,.TTSortN3ARight { background-image:url(SortAscN3.svg?v120); }
.TTSortN4ALeft,.TTSortN4ARight { background-image:url(SortAscN4.svg?v120); }
.TTSortN5ALeft,.TTSortN5ARight { background-image:url(SortAscN5.svg?v120); }
.TTSortN6ALeft,.TTSortN6ARight { background-image:url(SortAscN6.svg?v120); }
.TTSortN7ALeft,.TTSortN7ARight { background-image:url(SortAscN7.svg?v120); }
.TTSortN8ALeft,.TTSortN8ARight { background-image:url(SortAscN8.svg?v120); }
.TTSortN9ALeft,.TTSortN9ARight { background-image:url(SortAscN9.svg?v120); }
.TTSortN1DLeft,.TTSortN1DRight { background-image:url(SortDescN1.svg?v120); }
.TTSortN2DLeft,.TTSortN2DRight { background-image:url(SortDescN2.svg?v120); }
.TTSortN3DLeft,.TTSortN3DRight { background-image:url(SortDescN3.svg?v120); }
.TTSortN4DLeft,.TTSortN4DRight { background-image:url(SortDescN4.svg?v120); }
.TTSortN5DLeft,.TTSortN5DRight { background-image:url(SortDescN5.svg?v120); }
.TTSortN6DLeft,.TTSortN6DRight { background-image:url(SortDescN6.svg?v120); }
.TTSortN7DLeft,.TTSortN7DRight { background-image:url(SortDescN7.svg?v120); }
.TTSortN8DLeft,.TTSortN8DRight { background-image:url(SortDescN8.svg?v120); }
.TTSortN9DLeft,.TTSortN9DRight { background-image:url(SortDescN9.svg?v120); }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                              Cell checkboxes - Radio and Bool types                                           */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------ Radio Type images ------------------------------------------------------ */

/* Radio icons for cell RadioIcon = 0,1,2, set to <td> tag
   The ...Right is used when cell has set RadioRight='1'
   The ...None is used for RadioIcon='6'
   0 - unchecked radio, 1 - checked radio, 2 - unchecked checkbox, 3 - checked checkbox
   @ Set background, padding, border and text attributes
*/
.TTRadioBase { background-size:15px 15px; background-repeat:no-repeat; padding-top:3px; padding-bottom:3px; }
.TTWide .TTRadioBase { background-size:20px 20px; }
.TTHigh .TTRadioBase { padding-top:4px; padding-bottom:4px; }
.TTBig .TTRadioBase { padding-top:7px; padding-bottom:7px; background-size:24px 24px; }
.TTLow .TTRadioBase { padding-top:3px; padding-bottom:2px; background-size:13px 13px; }
.TTSmall .TTRadioBase { padding-top:2px; padding-bottom:1px; }
.TTMini .TTRadioBase { padding-top:1px; padding-bottom:0px; }
.TTRadioLeft,.TTRadioIconLeft { padding-left:20px; padding-right:6px; background-position:left center; }
.TTRadioRight,.TTRadioIconRight { padding-right:20px; padding-left:6px; background-position:right center; }
.TTWide .TTRadioLeft,.TTWide .TTRadioIconLeft { padding-left:25px; padding-right:10px; }
.TTWide .TTRadioRight,.TTWide .TTRadioIconRight { padding-right:25px; padding-left:10px; }
.TTBig .TTRadioLeft,.TTBig .TTRadioIconLeft { padding-left:30px; padding-right:15px; }
.TTBig .TTRadioRight,.TTBig .TTRadioIconRight { padding-right:30px; padding-left:15px; }
.TTLow .TTRadioLeft,.TTLow .TTRadioIconLeft { padding-left:16px; padding-right:5px; }
.TTLow .TTRadioRight,.TTLow .TTRadioIconRight { padding-right:16px; padding-left:5px; }
.TTRadio0Left,.TTRadio0Right { background-image:url(Radio0.svg?v120); } 
.TTRadio1Left,.TTRadio1Right { background-image:url(Radio1.svg?v120); } 
.TTRadio2Left,.TTRadio2Right { background-image:url(Bool0.svg?v120); }
.TTRadio3Left,.TTRadio3Right { background-image:url(Bool1.svg?v120); }
.TTRadioNone { background-image:none; }

/* Radio type padding change */
.TTRadio { padding-top:4px; padding-bottom:4px; }
.TTWide .TTRadio { padding-top:2px; padding-bottom:2px; }
.TTHigh .TTRadio { padding-top:6px; padding-bottom:6px; }
.TTBig .TTRadio { padding-top:8px; padding-bottom:8px; }
.TTGiant .TTRadio { padding-top:6px; padding-bottom:6px; }
.TTLow .TTRadio { padding-top:2px; padding-bottom:2px; }
.TTSmall .TTRadio { padding-top:1px; padding-bottom:0px; }
.TTMini .TTRadio { padding-top:1px; padding-bottom:0px; }

/* Set for RadioIcon = 6, as no icon */
.TTRadioNone { padding-left:5px; padding-right:5px; }
.TTLow .TTRadioNone { padding-left:2px; padding-right:2px; }
   
/* Custom radio icon for cell RadioIcon = "image file", set to <td> tag. 
   The ...Right is used when cell has set RadioRight='1'
   @ Set padding, border and text attributes
*/
.TTRadioIconLeft { background-position:left center; }
.TTRadioIconRight { background-position:right center; }

/* The Radio icons if set to nobr and span tags when set cell attribute Wrap='1'
   @ Set padding and optionally background, border and text attributes
*/
span.TTRadioBase,nobr.TTRadioBase { display:inline-block; }

/* Radio icons by standard <input>, for cell RadioIcon = 3,4,5
   ...RadioCell is set to the <td> tag around the radio. @ Set background, padding and border
   ...RadioInput is set to <input> type "checkbox" or "radio". @ Set margin, padding and line-height
   ...RadioText is set to <span> tag next to the <input>. @ Set text attributes and optionally background, padding and border
*/
.TTRadioCell { white-space:nowrap; vertical-align:top; line-height:0px; }
.TTRadioInput { margin:4px 4px 4px 4px; padding:0px; }
.TTWide .TTRadioInput { margin-top:6px; margin-bottom:6px; }
.TTHigh .TTRadioInput { margin-top:7px; margin-bottom:7px; }
.TTBig .TTRadioInput { margin-top:10px; margin-bottom:10px; }
.TTLow .TTRadioInput { margin-top:4px; margin-bottom:3px; }
.TTSmall .TTRadioInput { margin-top:3px; margin-bottom:2px; }
.TTMini .TTRadioInput { margin-top:2px; margin-bottom:1px; }
.TTRadioText { padding-right:6px; }
.TTSmall .TTRadioText { line-height:13px; }
nobr.TTRadioCell,span.TTRadioCell { display:inline-block; }

/* Caption of checked radio button; @ Set here border, padding, background and text attributes */
.TTRadioChecked { }

/* ------------------------------------------------- Bool Type images ------------------------------------------------------ */

/* Checkbox icons for table row cell, for BoolIcon = 0,1,2,3, set to <td> or <u> tag
   0 - unchecked checkbox, 1 - checked checkbox, X - empty (third) state (?), 2 - unchecked radio, 3 - checked radio, RO - read only
   ...BoolBase is added for all Bool in <td> tag
   ...BoolImage is added for all Bool in <u> tag
   ...BoolIcon is used for custom icon in BoolIcon="image file"
   @ Set here background and width and height
*/
.TTBoolBase,.TTBoolImage { background-size:15px 15px; background-repeat:no-repeat; background-position:center center; }
.TTWide .TTBoolBase,.TTWide .TTBoolImage { background-size:20px 20px; }
.TTBig .TTBoolBase,.TTBig .TTBoolImage { background-size:24px 24px; }
.TTLow .TTBoolBase,.TTLow .TTBoolImage { background-size:13px 13px; }
.TTBoolImage { display:inline-block; height:30px; width:24px; overflow:hidden; padding:0px; }
.TTHigh .TTBoolImage { height:40px; }
.TTBig .TTBoolImage { height:50px; }
.TTLow .TTBoolImage { height:25px; width:16px; }
.TTSmall .TTBoolImage { height:20px; }
.TTMini .TTDataRow .TTBoolImage { height:17px; }
.TTBoolIcon { }
.TTBool0,.TTBool0RO { background-image:url(Bool0.svg?v120); }
.TTBool1,.TTBool1RO { background-image:url(Bool1.svg?v120); }
.TTBoolX,.TTBoolXRO { background-image:url(BoolEmpty.svg?v120); }
.TTBool2,.TTBool2RO { background-image:url(Radio0.svg?v120); }
.TTBool3,.TTBool3RO { background-image:url(Radio1.svg?v120); }
.TTBool0RO,.TTBool1RO,.TTBoolXRO,.TTBool2RO,.TTBool3RO { opacity:0.5; }

/* Checkbox icons for Space row cell, for BoolIcon = 0,1,2,3, set to <td> or <u> tag
   0 - unchecked checkbox, 1 - checked checkbox, X - empty (third) state (?), 2 - unchecked radio, 3 - checked radio, RO - read only
   ...BoolBaseSpace is added for all Bool in <td> tag in Space cell
   ...BoolImageSpace is added for all Bool in <u> tag in Space cell
   ...BoolIconSpace is used for custom icon in BoolIcon="image file"
   
   @ Set here background, width and height and padding-left (width and height is used in <u> tag, padding-left in <td> tag)
*/
.TTMain .TTBoolBaseSpace,.TTMain .TTBoolImageSpace { background-size:20px 20px; padding-left:22px; padding-right:10px; background-position:center center; background-repeat:no-repeat; }
.TTNoSpaceLeft.TTBoolBaseSpace,.TTNoSpaceLeft.TTBoolImageSpace { background-position-x:3px; }
.TTNoSpaceRight.TTBoolBaseSpace,.TTNoSpaceRight.TTBoolImageSpace { background-position-x:calc(100% - 3px); }
.TTWide .TTBoolBaseSpace,.TTWide .TTBoolImageSpace { background-size:24px 24px; padding-left:27px; }
.TTBig .TTBoolBaseSpace,.TTBig .TTBoolImageSpace { background-size:28px 28px; padding-left:32px; }
.TTLow .TTBoolBaseSpace,.TTLow .TTBoolImageSpace { background-size:16px 16px; padding-left:20px; padding-right:3px; }
.TTLow .TTNoSpaceLeft.TTBoolBaseSpace.TTLow .TTNoSpaceLeft.TTBoolImageSpace { background-position-x:1px; }
.TTLow .TTNoSpaceRight.TTBoolBaseSpace,.TTLow .TTNoSpaceRight.TTBoolImageSpace { background-position-x:calc(100% - 1px); }
.TTMain .TTBoolImageSpace { display:inline-block; width:0px; height:26px; overflow:hidden; }
.TTHigh .TTBoolImageSpace { height:30px; }
.TTBig .TTBoolImageSpace { height:34px; }
.TTGiant .TTBoolImageSpace { height:38px; }
.TTLow .TTBoolImageSpace { height:20px; }
.TTBoolIconSpace { }
.TTBool0Space,.TTBool0SpaceRO { background-image:url(Bool0.svg?v120); }
.TTBool1Space,.TTBool1SpaceRO { background-image:url(Bool1.svg?v120); }
.TTBoolXSpace,.TTBoolXSpaceRO { background-image:url(BoolEmpty.svg?v120); }
.TTBool2Space,.TTBool2SpaceRO { background-image:url(Radio0.svg?v120); }
.TTBool3Space,.TTBool3SpaceRO { background-image:url(Radio1.svg?v120); }
.TTBool0SpaceRO,.TTBool1SpaceRO,.TTBoolXSpaceRO,.TTBool2SpaceRO,.TTBool3SpaceRO { opacity:0.5; }

/* Bool icons by standard <input>, for cell BoolIcon = 4,5, different for table and Space row cells
   @ Set margin and padding
*/
.TTBoolInput { margin:8px auto 9px auto; padding:0px; display:inline-block; }
.TTHigh .TTBoolInput { margin-top:13px; margin-bottom:14px; }
.TTBig .TTBoolInput { margin-top:18px; margin-bottom:19px; }
.TTLow .TTBoolInput { margin-top:6px; margin-bottom:6px; }
.TTSmall .TTBoolInput { margin-top:4px; margin-bottom:3px; }
.TTMini .TTDataRow .TTBoolInput { margin-top:2px; margin-bottom:2px; }
.TTBoolInputSpace { margin-top:5px; margin-bottom:3px; padding:0px; display:inline-block; }

/* Bool icons by text 'x' in rect, for cell BoolIcon = 6
   0 - unchecked checkbox, 1 - checked checkbox, 2 - empty (third) state (?), RO - read only
   @ Set height, width, border, background, padding, margin and text attributes
*/
.TTBoolChar { height:11px; width:10px; font:bold 11px Arial; margin:7px auto 7px auto; padding-left:1px; border:2px ridge white; color:#00a194; text-align:center; overflow:hidden; display:inline-block; }
.TTWide .TTBoolChar { height:16px; width:15px; font-size:16px; margin-top:4px; margin-bottom:5px; }
.TTHigh .TTBoolChar { margin-top:9px; margin-bottom:10px; }
.TTBig .TTBoolChar { height:20px; width:19px; font-size:20px; margin-top:12px; margin-bottom:13px; }
.TTLow .TTBoolChar { height:9px; width:8px; font-size:10px; margin-top:5px; margin-bottom:6px; }
.TTSmall .TTBoolChar { margin-top:3px; margin-bottom:3px; }
.TTMini .TTDataRow .TTBoolChar { margin-top:2px; margin-bottom:2px; }
.TTBoolChar2 { color:#00a194; }
.TTBoolChar0RO,.TTBoolChar1RO,.TTBoolChar2RO { color:gray; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                          Side pager                                                           */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ...PagerMain - main <div> tag inside <td> tag. It has set inline width. @ Set border, margin and padding
   ...PagerBody - the pages without header, <div> tag. @ Set background, border, margin and padding. 
   ...PagerBodyLeft, ...PagerBodyRight - added to the ...PagerBody according to the side where is the pager displayed.
   ...PagerHeader - the pager header, <div> tag. @ Set background, border, margin and padding. 
   ...PagerHeaderLeft, ...PagerHeaderRight - added to the ...PagerHeader according to the side where is the pager displayed.
   ...PagerCaption - text inside header, <div> tag, set text attributes and optionally also border, padding, margin and background
*/
.TTPagerMain { overflow:hidden; white-space:nowrap; }
.TTPagerBody { }
.TTPagerBodyLeft { }
.TTPagerBodyRight { }
.TTPagerHeader { cursor:default; }
.TTPagerHeaderLeft { }
.TTPagerHeaderRight { }
.TTPagerCaption { padding:0px 10px 0px 10px; white-space:nowrap; vertical-align:middle; display:table-cell; }
.TTLow .TTPagerCaption { padding-left:3px; padding-right:3px; }

/* ...PagerItem - one page name. @ Set background, border, margin, padding and text attributes
*/

.TTPagerItem { cursor:pointer; overflow:hidden; white-space:nowrap; padding:7px 5px 6px 10px; }
.TTWide .TTPagerItem { padding-top:5px; padding-bottom:4px; }
.TTHigh .TTPagerItem { padding-top:10px; padding-bottom:9px; }
.TTBig .TTPagerItem { padding-top:15px; padding-bottom:14px; }
.TTGiant .TTPagerItem { padding-top:13px; padding-bottom:12px; }
.TTLow .TTPagerItem { padding:4px 3px 4px 3px; }
.TTSmall .TTPagerItem { padding-top:2px; padding-bottom:1px; }
.TTMini .TTPagerItem { padding-top:0px; padding-bottom:0px; }

/* Classes to ...PagerItem added on pager Type="Gantt" if set ShowUsedPages / ShowExcludedPages
   @ Set background, border, margin, padding and text attributes
*/
.TTPagerItemUsed { color:green; }
.TTPagerItemUnused { color:#888; }
.TTPagerItemExcluded { background:#DDD; }

/* Marked part of the page name, <span> tag
   Sort1 - the first sorted column, Sort2 - the second sorted column, Sort3 - the third sorted column, set to b tag if single and to span tag if both
   Sep1 - separator " | ", Sep2 - separator " => ", Sep3 - separator ", ", None - no name "..."
*/
.TTMain b.TTPagerSort1 { color:inherit; font-weight:bold; }
.TTPagerSort2 { color:#00A194; }
.TTPagerSort3 { color:#00A194; }
.TTPagerSep1,.TTPagerSep2,.TTPagerSep3 { color:#166785; }
.TTPagerNone { }

/* Focus cursor - actually shown page(s) 
   ...PagerFocus - actually shown (scrolled) page(s) in pager Pages or actually zoomed chart in pager Gantt
   ...PagerFocus2 - actual view (scrolled) in pager Gantt
   ...PagerFocus3 - the whole pager is shown in actual view, in pager Gantt
*/
.TTPagerFocus,.TTPagerFocus2,.TTPagerFocus3 { position:relative; cursor:pointer; overflow:hidden; opacity:0.3; pointer-events:none; }
.TTPagerFocus2 { background:#F0F; }
.TTPagerFocus3 { background:#AFA; }

/* Hover cursor - highlighted page under mouse cursor. 
   @ Set background, border, padding
   */
.TTPagerHover { position:relative; cursor:pointer; overflow:hidden; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                      State colors and classes                                                 */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* The ...Color... classes are never assigned, they are used only to read the color. 
   @ In ...Color... set only the background-color, it must be set by number, not by name. If set by rgba(r,g,b,0.7) it is added instead of subtracted to the resulted color.
   All the colors except ...FocusedCell... and ...Default are relative colors, are added to the ...Default color; if the result color number exceeds 0x1000000, it is subtracted by the 0x1000000
   The ...Class... is added to the cell if its condition is fulfilled. Only the listed ...Class... are used, the others can have only the ...Color... set.
   @ In ...Class... set text attributes and color and optionally border and padding. If set here background-color with !important, it overrides the cell color and sets it as absolute
*/

/* The ...Color... classes are never assigned, they are used only to read the color. 
   @ In ...Color... set only the background-color, it must be set by number, not by name.
   All the colors except ...FocusedCell... and ...Default are relative colors, are added to the ...Default color; if the result color number exceeds 0x1000000, it is subtracted by the 0x1000000
   The ...Class... is added to the cell if its condition is fulfilled. Only the listed ...Class... are used, the others can have only the ...Color... set.
   @ In ...Class... set text attributes and color and optionally border and padding. If set here background-color with !important, it overrides the cell color and sets it as absolute
*/

.TTColorDefault { }                             /* Set in BASE DEFINITIONS. Base color for all cells, can be changed by <I Color /> attribute */

.TTColorNoFocus { }                             /* Set in BASE DEFINITIONS. Cell with CanFocus='0' */
.TTClassNoFocus { }              
.TTColorReadOnly { }                            /* Set in BASE DEFINITIONS. Cell with CanEdit='0' */
.TTClassReadOnly {  }
.TTColorPreview { background-color:#FFFFFF; }   /* Cell with CanEdit='2' */
.TTClassPreview { }
.TTColorFormula { }                             /* Set in BASE DEFINITIONS. Cell with editable formula */
.TTClassFormula { }
.TTColorEdit { }                                /* Cell with CanFocus='1' CanEdit='1' */
.TTClassEdit { }

.TTColorAlternate { }                           /* Set in BASE DEFINITIONS. Color for <Cfg Alternate/>, can be changed by <I AlternateColor /> */
.TTClassAlternate { }                           /* Can be changed by <I AlternateClass /> */

.TTColorSelected { }                            /* Set in BASE DEFINITIONS. Selected row or cell */
.TTClassSelected { }                            /* It is used only if set <Cfg SelectClass='1'/> */
.TTColorSelectedCell { }                        /* Set in BASE DEFINITIONS. Selected cell for SelectingCells=3 */
.TTClassSelectedCell { }                        /* It is used only if set <Cfg SelectClass='1'/> */
.TTColorFill { background-color:#FF80FF; }      /* Used when selecting cells by dragging due auto fill */

.TTColorError { }                               /* Set in BASE DEFINITIONS. Cell with Error attribute set */
.TTClassError { }

/* Row / Cell state colors, are ignored if row has set NoColorState='1' */
.TTColorDeleted { }                             /* Set in BASE DEFINITIONS. Deleted row */
.TTClassDeleted { }
.TTColorAdded { }                               /* Set in BASE DEFINITIONS. Newly added row */
.TTClassAdded { }
.TTColorMoved1 { background-color:#FFFFFF; }    /* Row moved inside its parent, only if sorting is not permitted */
.TTClassMoved1 { }
.TTColorMoved2 { }                              /* Set in BASE DEFINITIONS. Row moved to another parent */
.TTClassMoved2 { }
.TTColorChanged { }                             /* Set in BASE DEFINITIONS. Row with some cell value changed */
.TTClassChanged { }
.TTColorChangedCell { }                         /* Set in BASE DEFINITIONS. The cell with value changed */
.TTClassChangedCell { }

.TTColorMaxChildren { }                         /* Row created if row's children exceed <I MaxChildren/> */
.TTClassMaxChildren { }

.TTColorDetail { }                              /* Set in BASE DEFINITIONS. Row is master row, has set <I Detail /> attribute */
.TTClassDetail { }
.TTColorDetailSelected { }                      /* Set in BASE DEFINITIONS. Master row actually shown in detail grid */
.TTClassDetailSelected { }

.TTColorDragged { }                             /* Set in BASE DEFINITIONS. The source row actually being dragged by mouse */

.TTColorCellMenu { }                            /* Set in BASE DEFINITIONS. The cell showing cell popup Menu */

.TTColorFound1 { background-color:#d37aab; }    /* Found cell in SearchAction="Mark", first search */
.TTClassFound1 { }                              /* Used only if set <Cfg SearchClass='1'/> */
.TTColorFound2 { background-color:#FFC387; }    /* Found cell in SearchAction="Mark", second search */
.TTClassFound2 { }                              /* Used only if set <Cfg SearchClass='1'/> */
.TTColorFound3 { background-color:#87D787; }    /* Found cell in SearchAction="Mark", third search */
.TTClassFound3 { }                              /* Used only if set <Cfg SearchClass='1'/> */

.TTColorHoveredAbsolute { }                     /* If set, resets the hovered cell and row color to this color directly as absolute color */
.TTColorHovered { background-color:#F0F0FF; }   /* Row under mouse cursor, used only if the hovered cell or row has HoverRow["Color"]*/

/* Cell under mouse cursor, according to its look or permissions
   ...Color... is used only if the cell has set HoverCell["Color"] 
   ...Class... is used only if the cell has set HoverCell["Class"] 
   Always only one Color and Class is used, if the cell fulfills more conditions the latter has precedence
   If the resulted color is #FFFFFF, it is set as transparent, therefore in some cases is required to set #FFFFFE to get white color
*/
.TTColorHoveredCell { }                                      /* Set in BASE DEFINITIONS. Standard cell */
.TTClassHoveredCell { }
.TTColorHoveredCellReadOnly { }                              /* Set in BASE DEFINITIONS. Cell with CanEdit='0' */
.TTClassHoveredCellReadOnly { }
.TTColorHoveredCellNoFocus { }                               /* Set in BASE DEFINITIONS. Cell with CanFocus='0' */
.TTClassHoveredCellNoFocus { }
.TTColorHoveredCellHeader { }                                /* Set in BASE DEFINITIONS. Cell in Header row */
.TTClassHoveredCellHeader {  }
.TTColorHoveredCellPanel { }                                 /* Cell Type = "Panel" */
.TTClassHoveredCellPanel { }
.TTColorHoveredCellFastPanel { }                             /* Cell Type = "Panel" if FastPanel is shown */
.TTClassHoveredCellFastPanel { }
.TTColorHoveredCellSpace { }                                 /* Space row cell */
.TTClassHoveredCellSpace { }
.TTColorHoveredCellSpaceEdit { background-color:#FFFFFF; }   /* Editable Space row cell */
.TTClassHoveredCellSpaceEdit > div { border-color:#124D64; }
.TTColorHoveredCellSpaceDefaults { background-color:#FFFFFF; } /* Space row cell with Button="Defaults" */
.TTClassHoveredCellSpaceDefaults > div { border-color:#124D64; }
.TTColorHoveredCellSpaceBool0 { }                            /* Space row cell of Type="Bool" and value 0 */
.TTClassHoveredCellSpaceBool0 { opacity:0.6; }
.TTColorHoveredCellSpaceBool1 { }                            /* Space row cell of Type="Bool" and value 1 */
.TTClassHoveredCellSpaceBool1 { opacity:0.6; }
.TTColorHoveredCellSpaceBoolX { }                            /* Space row cell of Type="Bool" and value "" */
.TTClassHoveredCellSpaceBoolX { opacity:0.6; }
.TTColorHoveredCellSpaceBoolIcon { }                        /* Space row cell of Type="Bool" and BoolIcon other than 0 and 2 and Filter / Group Panel */
.TTClassHoveredCellSpaceBoolIcon { opacity:0.6; }
.TTColorHoveredCellSpaceHtml { }                            /* Space row cell of Type="Html"*/
.TTClassHoveredCellSpaceHtml { }
.TTColorHoveredCellButton { }                               /* Space row cell of Type="Button" and Button="Html" */
.TTClassHoveredCellButton { opacity:0.5; }
.TTColorHoveredCellButton1 { }                              /* Space row cell of Type="Button" and Button="Html" and value 1 */
.TTClassHoveredCellButton1 { opacity:0.5; }
.TTColorHoveredCellButtonButton { }                         /* Space row cell of Type="Button" and Button="Button" */
.TTClassHoveredCellButtonButton u { border-color:#124D64; }
.TTColorHoveredCellButtonButton1 { }                        /* Space row cell of Type="Button" and Button="Button" and value 1 */
.TTClassHoveredCellButtonButton1 u { border-color:#124D64; }
.TTColorHoveredCellTab { }                                  /* Space row cell of Type="Button" and Button="Tab" */
.TTClassHoveredCellTab { background:#B5DBE0!important; }
.TTColorHoveredCellTab1 { }                                 /* Space row cell of Type="Button" and Button="Tab" and value 1*/
.TTClassHoveredCellTab1 { background:#065775!important; }
.TTColorHoveredCellIndex { }                                /* Set in BASE DEFINITIONS. Cell in column RowIndex */
.TTClassHoveredCellIndex { }

.TTColorFocused { background-color:#E6E6E6; }               /* Focused row, used only if the focused cell or row has FocusRow["Color"] */
.TTClassFocused { }                                         /* Used only if the focused cell or row has FocusRow["Class"] */

/* Focused cell, the color is absolute color 
   ...Color... is used only if the cell or row has set FocusCell["Color"] 
   ...Class... is used only if the cell or row has set FocusCell["Class"] 
*/
.TTColorFocusedCell { }                                     /* Set in BASE DEFINITIONS. Standard cell */
.TTClassFocusedCell { } 
.TTColorFocusedCellRelative { }                             /* Set in BASE DEFINITIONS. Standard cell if set FocusRect=8 */
.TTClassFocusedCellRelative { } 
.TTColorFocusedCellRect { }                                 /* Set in BASE DEFINITIONS. Standard cell if more cells are focused */
.TTClassFocusedCellRect { } 
.TTColorEditedCell { background-color:#FFFFFF; }            /* Cell being edited */
.TTSoft .TTColorEditedCell { background-color:#FFFFFE; }
.TTDim .TTColorEditedCell { background-color:#F2F2F2; }
.TTColorViewedCell { background-color:#FFFFFF; }            /* Cell being viewed - edited cell with CanEdit='2' */
.TTSoft .TTColorViewedCell { background-color:#FFFFFE; }
.TTDim .TTColorViewedCell { background-color:#F2F2F2; }
.TTColorFocusedCellSafari { background-color:#A0A0FF; }     /* If the cell border is hidden due <Cfg BorderCursors='0' or '2'/> */
.TTColorFocusedCellHeader { background-color:#005555; }     /* Header row cell */
.TTClassFocusedCellHeader { background-color:#005555; }
.TTColorFocusedCellSpace { background-color:#BCD; }         /* Space row cell */
.TTClassFocusedCellSpace { }
.TTColorFocusedCellSpaceEdit { background-color:#FFFFFF; }  /* Editable Space row cell */
.TTClassFocusedCellSpaceEdit > div { }                      /* Set in BASE DEFINITIONS */
.TTColorFocusedCellSpaceDefaults { background-color:#FFFFFF; }  /* Space row cell with Button="Defaults" */
.TTClassFocusedCellSpaceDefaults > div { }                  /* Set in BASE DEFINITIONS */
.TTColorFocusedCellSpaceBool { background-color:#BCD; }     /* Space row cell of Type="Bool" */
.TTClassFocusedCellSpaceBool { }
.TTColorFocusedCellButton { background-color:#BCD; }        /* Space row cell of Type="Button" */
.TTClassFocusedCellButton { }

/* Side colors set by ColorCursor attribute 
   ...Col is top / bottom side, ...Row is left / right side
   ...Class... is used only if set <Cfg> ColorCursor bit 5, &16
*/
.TTColorSelectedCol { background-color:#EEE; }              /* Side for selected cells */
.TTClassSelectedCol { }
.TTColorSelectedRow { background-color:#EEE; } 
.TTClassSelectedRow { }
.TTColorFocusedCol { background-color:#EEE; }               /* Side for cells focused by range (FRect) */
.TTClassFocusedCol { }
.TTColorFocusedRow { background-color:#EEE; } 
.TTClassFocusedRow { }
.TTColorEditedCol { background-color:#DDD; }                /* Side for focused cell (FRow/FCol) */
.TTClassEditedCol { }
.TTColorEditedRow { background-color:#DDD; } 
.TTClassEditedRow { }
.TTColorHoveredCol { background-color:#EEE; }               /* Side for cell under mouse cursor (ARow/ACol) */
.TTClassHoveredCol { }
.TTColorHoveredRow { background-color:#EEE; }
.TTClassHoveredRow { }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                Hover, focus, edit cursors                                                     */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* ------------- Cell and row highlighted under mouse cursor ------------- */

/* ...HoverPanelBackground - Background shown above left side Panel cell when hovering the row; shown only if the hovered cell or row has HoverRow["Background"]; @ set background and opacity 
   ...HoverRowBackground   - Background shown above the whole hovered row, except hovered cell and Panel; shown only if the hovered cell or row has HoverRow["Background"]; @ set background and opacity
   ...HoverRowBorder       - Border around the whole hovered row; shown only if the hovered cell or row has HoverRow["Border"]; @ set border
   ...HoverCellBorder      - Border around the hovered cell; shown only if the hovered cell or row has HoverCell["Border"]; @ set border
   ...Dynamic   - Added to the base class if set Cfg DynamicBorder
*/
.TTHoverPanelBackground { pointer-events:none; } 
.TTHoverRowBackground { pointer-events:none; } 
.TTHoverRowBorder { z-index:1; cursor:default; pointer-events:none; } 
.TTHoverRowBorderDynamic { pointer-events:none; }
.TTHoverCellBorder { z-index:3; padding:1px; pointer-events:none; } 
.TTHoverCellBorderDynamic { pointer-events:none; }

/* ---------------- Highlighted focused cell(s) and row(s) ------------- */

/* ...FocusPanelBackground - Background shown above left side Panel cell when the row is focused; shown only if the focused cell or row has FocusRow["Background"]; @ set background and opacity 
   ...FocusRowBackground   - Background shown above the whole focused row, except focused cell and Panel; shown only if the focused cell or row has FocusRow["Background"]; @ set background and opacity
   ...FocusRowBorder       - Border around the whole hovered row; shown only if the hovered cell or row has FocusRow["Border"]; @ set border
   ...FocusCellBorder      - Border around the focused cell in table row; shown only if the focused cell or row has FocusCell["Border"]; @ set border and cursor
   ...FocusCellSpaceBorder - Border around the focused cell in Space row; shown only if the focused cell or row has FocusCell["Border"]; @ set border and cursor
   ...FocusCellCorner      - Bottom right corner for autofill; shown only if the focused cell or row has FocusCell["Corner"]; @ set border, margin, padding, background, width, height and cursor
*/
.TTFocusPanelBackground { pointer-events:none; } 
.TTFocusRowBackground { pointer-events:none; } 
.TTFocusRowBorder { z-index:2; pointer-events:none; }
.TTFocusCellBorder { z-index:4; }
.TTFocusCellSpaceBorder { z-index:4; pointer-events:none; }
.TTFocusCellCorner { position:relative; padding:0px; margin-left:-3px; margin-top:-5px; width:7px; height:7px; z-index:4; cursor:crosshair; }

/* ------------- Highlighted focused cell in edit mode ------------- */

/* ...EditCellBorder      - Border around the focused cell in table row in edit mode; shown only if the focused cell or row has FocusCell["Border"]; @ set border 
   ...EditCellSpaceBorder - Border around the focused cell in Space row in edit mode; shown only if the focused cell or row has FocusCell["Border"]; @ set border 
   ...EditCellCorner      - Bottom right corner for autofill; shown only if the focused cell or row has FocusCell["Corner"] and is set <Cfg DragEdit='1'/>; @ set border, margin, padding, background, width, height and cursor
   ...EditCellInput       - Parent div tag where the <input> or <textarea> is placed to; @ set border, padding and background
 */
.TTEditCellBorder { z-index:4; }
.TTEditCellSpaceBorder { z-index:4; } 
.TTEditCellCorner { position:relative; padding:0px; margin-left:-3px; margin-top:-5px; width:7px; height:7px; z-index:4; cursor:crosshair; }
.TTTouch .TTEditCellCorner { width:10px; height:10px; margin-left:0px; }
.TTEditCellInput { position:relative; overflow:hidden; z-index:2; padding:1px; line-height:0px; vertical-align:middle; }

/* ------------- Support classes removing border ------------- 

/* added to ...Background or ...Border classes; @ Do not change */
.TTCursorBackground { position:relative; border:none; padding:0px; overflow:hidden; }
.TTCursorBorderLeft,.TTCursorBorderRight,.TTCursorBorderTop,.TTCursorBorderBottom { position:relative; overflow:hidden; width:0px; height:0px; }
.TTCursorBorderLeft { border-right:none!important; border-top:none!important; border-bottom:none!important; padding-right:0px!important; padding-top:0px!important; padding-bottom:0px!important; }
.TTCursorBorderRight { border-left:none!important; border-top:none!important; border-bottom:none!important; padding-left:0px!important; padding-top:0px!important; padding-bottom:0px!important; }
.TTCursorBorderTop { border-bottom:none!important; border-left:none!important; border-right:none!important; padding-bottom:0px!important; padding-left:0px!important; padding-right:0px!important; }
.TTCursorBorderBottom { border-top:none!important; border-left:none!important; border-right:none!important; padding-top:0px!important; padding-left:0px!important; padding-right:0px!important; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                          Dragging objects                                                     */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Set to ghost tag under mouse cursor when dragging something in grid or Gantt; 
   Used when <Cfg ShowDrag='1'/>. For dragged rows is used only if set <Cfg DragObject='1'/>
   The tag is <div> with absolute position and contains the dragged row(s), column header(s) or GanttRun box(es)
   @ Set border, margin, padding, opacity and optionally background
*/
.TTMouseObject { opacity:0.5; z-index:300; overflow:hidden; }

/* Set to ghost tag under mouse cursor as vertical and horizontal line */
.TTVLine { width:1px; border-left:1px solid black; overflow:hidden; cursor:e-resize; }
.TTHLine { height:1px; border-top:1px solid black; overflow:hidden; cursor:e-resize; }

/* The arrows showing actual drop position when dragging column header or GanttRun box
   @ Set background, width and height
*/
.TTDragColInsideTop,.TTDragColInsideBottom,.TTDragColOutsideTop,.TTDragColOutsideBottom,.TTDragRowLeft,.TTDragRowRight,.TTDragGanttRunTop,.TTDragGanttRunBottom,.TTDragGanttRunTopJoin,.TTDragGanttRunBottomJoin {
   position:absolute; width:20px; height:22px; overflow:hidden; z-index:301; background-repeat:no-repeat; background-size:15px 15px;
   }
.TTDragColInsideTop,.TTDragGanttRunTop { background-position:center 5px; background-image:url(DropColAbove.svg?v120); }
.TTDragColOutsideTop,.TTDragGanttRunTopJoin { background-position:center 5px; background-image:url(DropColOutAbove.svg?v120); }
.TTWide .TTDragColInsideTop,.TTWide .TTDragGanttRunTop,.TTWide .TTDragColOutsideTop,.TTWide .TTDragGanttRunTopJoin { background-position:center top; background-size:20px 20px; }
.TTDragColInsideBottom,.TTDragGanttRunBottom { background-position:center bottom 5px; background-image:url(DropColBelow.svg?v120); }
.TTDragColOutsideBottom,.TTDragGanttRunBottomJoin { background-position:center bottom 5px; background-image:url(DropColOutBelow.svg?v120); }
.TTWide .TTDragColInsideBottom,.TTWide .TTDragGanttRunBottom,.TTWide .TTDragColOutsideBottom,.TTWide .TTDragGanttRunBottomJoin { background-position:center bottom; background-size:20px 20px; }
.TTDragRowLeft { width:21px; background-position:left 5px center; background-image:url(DropRowLeft.svg?v120); }
.TTDragRowRight { width:22px; background-position:right 6px center; background-image:url(DropRowRight.svg?v120); }
.TTWide .TTDragRowLeft { background-position:left center; background-size:20px 20px; }
.TTWide .TTDragRowRight { background-position:right center; background-size:20px 20px; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                    Popup menus and dialogs                                                    */
/*                                        Special TreeGrid menus, redefinition for TGLib                                         */
/* -------------------------------------------------------------------------------------------------------------------------- */

.TTDB.TTMenuMainTop { margin-top:-1px; }

/* ----------------------------------------------- Filter operator menu ---------------------------------------------------- */

/* Redefines standard popup ...Menu... attributes as ...FilterMenu... 
*/
.TTFilterMenuMainTop { margin-left:-3px; margin-top:1px; }
.TTFilterMenuMainBottom { margin-left:-3px; margin-top:-3px; }
.TTFilterMenuHeader { margin-left:0px; padding:1px 3px 1px 5px; }
.TTBig .TTFilterMenuHeader { padding-left:10px; }
.TTLow .TTFilterMenuHeader { padding-left:3px; }
.TTFilterMenuHeaderTop { border-top:0px none; margin-top:-2px; }
.TTFilterMenuHeaderBottom { border-bottom:0px none; margin-top:0px; }
.TTFilterMenuHeader .TTFilterAllMenu { width:20px; height:21px; }
.TTFilterMenuHeaderTop .TTFilterAllMenu { background-position-y:6px; }
.TTFilterMenuHeaderBottom .TTFilterAllMenu { background-position-y:3px; }
.TTWide .TTFilterMenuHeader .TTFilterAllMenu { height:25px; }
.TTWide .TTFilterMenuHeaderTop .TTFilterAllMenu { background-position-y:5px; }
.TTWide .TTFilterMenuHeaderBottom .TTFilterAllMenu { background-position-y:2px; }
.TTBig .TTFilterMenuHeader .TTFilterAllMenu { height:31px; width:27px; }
.TTBig .TTFilterMenuHeaderTop .TTFilterAllMenu { background-position-y:6px; }
.TTBig .TTFilterMenuHeaderBottom .TTFilterAllMenu { background-position-y:3px; }
.TTLow .TTFilterMenuHeader .TTFilterAllMenu { height:18px; width:17px; }
.TTLow .TTFilterMenuHeaderTop .TTFilterAllMenu { background-position-y:5px; }
.TTLow .TTFilterMenuHeaderBottom .TTFilterAllMenu { background-position-y:2px; }
.TTFilterMenuShadow { }
.TTFilterMenuItem { padding-top:3px; padding-bottom:3px; padding-left:4px; }
.TTBig .TTFilterMenuItem { padding-top:5px; padding-bottom:5px; padding-left:9px; }
.TTLow .TTFilterMenuItem { padding-top:2px; padding-bottom:2px; padding-left:2px; }
.TTFilterMenuItem .TTMenuCheckedIconLeft,.TTFilterMenuItem .TTMenuUncheckedIconLeft { padding-left:23px; }
.TTWide .TTFilterMenuItem .TTMenuCheckedIconLeft,.TTWide .TTFilterMenuItem .TTMenuUncheckedIconLeft { padding-left:29px; }
.TTBig .TTFilterMenuItem .TTMenuCheckedIconLeft,.TTBig .TTFilterMenuItem .TTMenuUncheckedIconLeft { padding-left:35px; }
.TTLow .TTFilterMenuItem .TTMenuCheckedIconLeft,.TTLow .TTFilterMenuItem .TTMenuUncheckedIconLeft { padding-left:20px; }

/* ---------------------------------------------------- Enum menu ---------------------------------------------------------- */

/* ...EnumMenu... redefine particular popup menu ...Menu... classes for Enum type popup menu
   ...EnumHeader... is used inside popup menu header ...EnumMenuHeader tag and shows the Enum icon on left or right side or nowhere; @ Set background, padding and text attributes and optionally border and margin
*/
.TTEnumMenuMainBottom { margin-top:-6px; }
.TTEnumMenuMain.TTMenuMainSpace { margin-left:-1px; margin-right:1px; }
.TTEnumMenuMainTop.TTMenuMainSpace { margin-top:3px; }
.TTDB.TTEnumMenuMain { margin-left:-5px; margin-right:0px; }
.TTDB.TTEnumMenuMainTop { margin-top:-2px; }
.TTDB.TTEnumMenuMainBottom { margin-top:-8px; }
.TTDB.TTEnumMenuMain.TTMenuMainSpace { margin-left:-3px; margin-right:3px; }
.TTDB.TTEnumMenuMainTop.TTMenuMainSpace { margin-top:2px; }

.TTEnumMenuHeader { padding:0px 5px 2px 0px; margin-left:-3px; }
.TTLow .TTEnumMenuHeader { padding-left:3px; padding-right:2px; }
.TTEnumMenuHeaderBottom,.TTEnumMenuHeaderTop { padding-top:3px; padding-bottom:3px; margin-top:-3px; }
.TTDB.TTEnumMenuHeaderBottom,.TTDB.TTEnumMenuHeaderTop { margin-top:-5px; padding-bottom:2px; margin-left:-5px; padding-left:2px; padding-right:3px; }
.TTMain .TTEnumHeaderLeft,.TTMain .TTEnumHeaderRight,.TTMain .TTEnumHeaderNone { box-sizing:border-box!important; }
.TTEnumHeaderLeft,.TTEnumHeaderRight,.TTEnumHeaderNone { background:white; padding:5px 10px 3px 10px; white-space:nowrap; cursor:pointer; }
.TTEnumHeaderLeft,.TTEnumHeaderRight { background:transparent url(SideEnumExpanded.svg?v120) no-repeat; background-size:15px 15px;}
.TTEnumHeaderLeft { padding-left:25px; background-position:5px calc(50% + 1px); }
.TTEnumHeaderRight { padding-right:25px; background-position:right calc(50% + 1px); }
.TTDB .TTEnumHeaderLeft,.TTDB .TTEnumHeaderRight,.TTDB .TTEnumHeaderNone { padding-top:7px; padding-bottom:4px; }
.TTDB .TTEnumHeaderLeft { background-position:5px calc(50% + 1px); }
.TTDB .TTEnumHeaderRight { background-position:calc(100% - 2px) calc(50% + 1px); }
.TTMain .TTEnumHeaderFilterLeft,.TTMain .TTEnumHeaderFilterRight,.TTMain .TTEnumHeaderFilterNone { padding:1px 11px 0px 11px; }
.TTMain .TTEnumHeaderFilterLeft { padding-left:26px; background-position:6px calc(50% + 1px); }
.TTMain .TTEnumHeaderFilterRight { padding-right:26px; background-position:right calc(50% + 1px); }
.TTWide .TTEnumHeaderLeft,.TTWide .TTEnumHeaderRight,.TTWide .TTEnumHeaderNone { padding-top:3px; background-size:20px 20px; background-position-y:calc(50% - 2px); }
.TTWide .TTEnumHeaderLeft { padding-left:30px; }
.TTWide .TTEnumHeaderRight { padding-right:30px; }
.TTWide .TTDB .TTEnumHeaderLeft,.TTWide .TTDB .TTEnumHeaderRight,.TTWide .TTDB .TTEnumHeaderNone { padding-top:5px; padding-bottom:2px; background-position-y:calc(50% - 1px); }
.TTMain.TTWide .TTEnumHeaderFilterLeft,.TTMain.TTWide .TTEnumHeaderFilterRight,.TTMain.TTWide .TTEnumHeaderFilterNone { padding-top:1px; }
.TTMain.TTWide .TTEnumHeaderFilterLeft { padding-left:31px; }
.TTMain.TTWide .TTEnumHeaderFilterRight { padding-right:31px; }
.TTHigh .TTEnumHeaderLeft,.TTHigh .TTEnumHeaderRight,.TTHigh .TTEnumHeaderNone { padding-top:5px; background-position-y:calc(50% - 1px); }
.TTMain.TTHigh .TTEnumHeaderFilterLeft,.TTMain.TTHigh .TTEnumHeaderFilterRight { padding-top:2px; }
.TTBig .TTEnumHeaderLeft,.TTBig .TTEnumHeaderRight,.TTBig .TTEnumHeaderNone { padding-top:4px; padding-bottom:2px; background-size:24px 24px; }
.TTBig .TTEnumHeaderLeft { padding-left:45px; background-position:10px calc(50% - 1px); }
.TTBig .TTEnumHeaderRight { padding-right:45px; background-position:calc(100% - 5px) calc(50% - 1px); }
.TTBig .TTDB .TTEnumHeaderLeft { background-position:10px calc(50% - 1px); }
.TTBig .TTDB .TTEnumHeaderRight { background-position:calc(100% - 7px) calc(50% - 1px); }
.TTMain.TTBig .TTEnumHeaderFilterLeft { padding-left:46px; padding-top:4px; background-position:11px calc(50% - 1px); }
.TTMain.TTBig .TTEnumHeaderFilterRight { padding-right:46px; padding-top:4px; background-position:calc(100% - 7px) calc(50% - 1px); }
.TTGiant .TTEnumHeaderLeft,.TTGiant .TTEnumHeaderRight { padding-top:3px; background-position-y:calc(50% - 1px); }
.TTMain.TTGiant .TTEnumHeaderFilterLeft { background-position:11px calc(50% - 1px); }
.TTMain.TTGiant .TTEnumHeaderFilterRight { background-position:calc(100% - 5px) calc(50% - 1px); }
.TTGiant .TTDB .TTEnumHeaderLeft,.TTGiant .TTDB .TTEnumHeaderRight { padding-top:4px; background-position-y:calc(50% - 1px); }
.TTLow .TTEnumHeaderLeft,.TTLow .TTEnumHeaderRight,.TTLow .TTEnumHeaderNone { padding:2px 0px 1px 0px; background-size:13px 13px; }
.TTLow .TTEnumHeaderLeft { padding-left:17px; background-position:0px center; }
.TTLow .TTEnumHeaderRight { padding-right:20px; background-position:right 0px center; }
.TTLow .TTDB .TTEnumHeaderLeft,.TTLow .TTDB .TTEnumHeaderRight,.TTLow .TTDB .TTEnumHeaderNone { padding-top:4px; padding-bottom:2px; }
.TTLow .TTDB .TTEnumHeaderLeft { padding-left:20px; background-position:3px calc(50% + 1px); }
.TTLow .TTDB .TTEnumHeaderRight { padding-left:3px; background-position:right calc(50% + 1px); }
.TTMain.TTLow .TTEnumHeaderFilterLeft,.TTMain.TTLow .TTEnumHeaderFilterRight,.TTMain.TTLow .TTEnumHeaderFilterNone { padding:1px 1px 0px 1px; line-height:10px; }
.TTMain.TTLow .TTEnumHeaderFilterLeft { padding-left:18px; background-position:1px center; }
.TTMain.TTLow .TTEnumHeaderFilterRight { padding-right:21px; background-position:right center; }
.TTSmall .TTEnumHeaderLeft,.TTSmall .TTEnumHeaderRight,.TTSmall .TTEnumHeaderNone { padding-top:2px; padding-bottom:0px; line-height:12px; }
.TTSmall .TTEnumHeaderLeft *,.TTSmall .TTEnumHeaderRight *,.TTSmall .TTEnumHeaderNone * { line-height:12px; }
.TTMain.TTSmall .TTEnumHeaderFilterLeft,.TTMain.TTSmall .TTEnumHeaderFilterRight,.TTMain.TTSmall .TTEnumHeaderFilterNone { padding-top:1px; line-height:10px; }
.TTSmall .TTEnumHeaderFilterLeft *,.TTSmall .TTEnumHeaderFilterRight *,.TTSmall .TTEnumHeaderFilterNone * { line-height:10px; }
.TTMini .TTEnumHeaderLeft,.TTMini .TTEnumHeaderRight,.TTMini .TTEnumHeaderNone { padding-top:0px; }
.TTMini .TTDB .TTEnumHeaderLeft,.TTMini .TTDB .TTEnumHeaderRight,.TTMini .TTDB .TTEnumHeaderNone { padding-top:2px; padding-bottom:0px; line-height:12px; }
.TTMini .TTDB .TTEnumHeaderLeft *,.TTMini .TTDB .TTEnumHeaderRight *,.TTMini .TTDB .TTEnumHeaderNone * { line-height:12px; }
.TTMain.TTTiny .TTEnumHeaderFilterLeft { padding-left:17px; background-position:0px center; }
.TTMain.TTTiny .TTEnumHeaderFilterRight { padding-left:0px; }

/* ---------------------------------------------------- Defaults & Suggest menu ---------------------------------------------------------- */
.TTDB.TTDefaultsMenuMainTop,.TTDB.TTSuggestMenuMainTop { margin-top:0px; }
.TTDB.TTDefaultsMenuMainBottom,.TTDB.TTSuggestMenuMainBottom { margin-top:-1px; }
.TTDefaultsMenuOuter,.TTSuggestMenuOuter { margin-right:-5px; }
.TTMenuMainSpace.TTDefaultsMenuMain { margin-left:-1px; margin-right:1px; }
.TTMenuMainSpace .TTDefaultsMenuOuter,.TTMenuMainSpace .TTSuggestMenuOuter { margin-right:0px; }
.TTMenuMainSpace.TTSuggestMenuMainTop { margin-top:7px; }
.TTMenuMainSpace.TTSuggestMenuMainBottom { margin-top:-7px; }
.TTSuggestMenuMain { user-select:none; -ms-user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; } 

/* -------------------------------------------------- Button List menu ------------------------------------------------------ */

/* ...ToolMenu... redefine particular popup menu ...Menu... classes for Button type with List attribute popup menu
   ...ToolHeader... is used inside popup menu header ...ToolMenuHeader tag for row Space='-1' (Above), Space='5' (Below) and others; @ Set background, padding and text attributes and optionally border and margin
*/
.TTToolMenuMain { }
.TTToolMenuHeader { display:none; }
.TTToolMenuItem { }
.TTToolMenuOuter { }
.TTToolMenuBody { }

.TTToolHeader,.TTToolHeaderAbove,.TTToolHeaderBelow { }
.TTToolHeaderAbove { }
.TTToolHeaderBelow { }

/* ------------------------------------------- Grid configuration menus --------------------------------------------------- */

/* Special settings for Cfg and Columns TreeGrid menus; override the standard menu settings defined above */
.TTCfgMenuOuter,.TTColumnsMenuOuter { }
.TTCfgMenuHead,.TTColumnsMenuHead { }
.TTCfgMenuBody,.TTColumnsMenuBody { }
.TTCfgMenuFoot,.TTColumnsMenuFoot { }
.TTCfgMenuButton { } 
.TTColumnsMenuButton { }
.TTCfgMenuItemText { }
.TTColumnsMenuItemText { white-space:nowrap; }
.TTCfgMenuItem,.TTColumnsMenuItem { padding-top:1px; padding-bottom:1px; }
.TTWide .TTCfgMenuItem,.TTWide .TTColumnsMenuItem { padding-top:4px; padding-bottom:4px; }

/* ---------------------------------------------- Popup grid dialog ------------------------------------------------------- */

/* Special settings for Popup grid shown by Dates button or ShowPopupGrid API method; overrides the standard dialog settings defined above */
.TTPopupGridOuter { overflow:visible; }
.TTPopupGridHead { padding:0px; }
.TTPopupGridBody { padding:0px; }
.TTPopupGridFoot { padding:0px; }
.TTPopupGridButton { width:50px; margin-top:-2px; margin-bottom:3px; }

/* ---------------------------------------------- Choose cell border menu --------------------------------------------------- */

/* Border style menu, ...Style is added to all menu items, ...Empty is added for empty style, ...X is added for given border style 
   @ Change height, width, margin and background
*/
.TTMenuItemBorderStyle { margin-bottom:9px; height:7px; width:50px; border-bottom-color:black; }
.TTMenuItemBorderEmpty { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#D4D4D4; }
.TTMenuItemBorder0 { border-bottom:0px none; }
.TTMenuItemBorder1 { border-bottom-width:1px; border-bottom-style:solid; }
.TTMenuItemBorder2 { border-bottom-width:2px; border-bottom-style:solid; }
.TTMenuItemBorder3 { border-bottom-width:3px; border-bottom-style:solid; }
.TTMenuItemBorder4 { border-bottom-width:1px; border-bottom-style:dotted; }
.TTMenuItemBorder5 { border-bottom-width:2px; border-bottom-style:dotted; }
.TTMenuItemBorder6 { border-bottom-width:1px; border-bottom-style:dashed; }
.TTMenuItemBorder7 { border-bottom-width:2px; border-bottom-style:dashed; }

/* Border edge menu, ...Edge is added to all menu items, ...Border is empty edge that is not used now
   ...All - all edges, ...O15 - outer edges, ...I3 - inner edges, ...I2 - vertical inner edge, ...I1 - horizontal inner edge, 
   ...O1 - top edge, ...O2 - right edge, ...O4 - bottom edge, ...O8 - left edge, ...O5 - top and bottom edge, ...O10 - left and right edge
   @ Change height, width, margin and background
*/
.TTMenuItemBorderEdge { height:23px; width:24px; background-size:17px 17px; background-repeat:no-repeat; background-position:center center; }
.TTWide .TTMenuItemBorderEdge { background-size:21px 21px; }
.TTBig .TTMenuItemBorderEdge { height:28px; background-size:25px 25px; }
.TTMenuItemBorder { background-image:url(ButtonBorderMenu.svg?v120); }
.TTMenuItemBorderAll { background-image:url(ButtonBorderAllMenu.svg?v120); }
.TTMenuItemBorderO15 { background-image:url(ButtonBorderOut15Menu.svg?v120); }
.TTMenuItemBorderI3 { background-image:url(ButtonBorderIn3Menu.svg?v120); }
.TTMenuItemBorderI2 { background-image:url(ButtonBorderIn2Menu.svg?v120); }
.TTMenuItemBorderI1 { background-image:url(ButtonBorderIn1Menu.svg?v120); }
.TTMenuItemBorderO1 { background-image:url(ButtonBorderOut1Menu.svg?v120); }
.TTMenuItemBorderO2 { background-image:url(ButtonBorderOut2Menu.svg?v120); }
.TTMenuItemBorderO4 { background-image:url(ButtonBorderOut4Menu.svg?v120); }
.TTMenuItemBorderO8 { background-image:url(ButtonBorderOut8Menu.svg?v120); }
.TTMenuItemBorderO5 { background-image:url(ButtonBorderOut5Menu.svg?v120); }
.TTMenuItemBorderO10 { background-image:url(ButtonBorderOut10Menu.svg?v120); }

/* ---------------------------------------------- Choose language menu --------------------------------------------------- */

.TTMenuItemLanguage { opacity:0.6; color:black; height:36px; line-height:36px; padding-left:50px; background-size:40px 40px; background-repeat:no-repeat; background-position:left center; }
.TTWide .TTMenuItemLanguage { height:46px; line-height:46px; background-size:52px 52px; padding-left:60px; }
.TTHigh .TTMenuItemLanguage { height:50px; line-height:50px; }
.TTTiny .TTMenuItemLanguage { height:22px; line-height:22px; background-size:24px 24px; padding-left:28px; }

.TTMenuCfgItemLanguage { opacity:0.6; color:black; padding-left:30px; background-size:24px 24px; background-repeat:no-repeat; background-position:left center; }
.TTMenuEnumItem .TTMenuCfgItemLanguage  { height:22px; }
.TTHigh .TTMenuEnumItem .TTMenuCfgItemLanguage  { height:25px; }
.TTBig .TTMenuCfgItemLanguage { padding-left:40px; background-size:32px 32px; }
.TTBig .TTMenuEnumItem .TTMenuCfgItemLanguage  { height:35px; }
.TTSmall .TTMenuCfgItemLanguage { padding-left:25px; background-size:20px 20px; }
.TTSmall .TTMenuEnumItem .TTMenuCfgItemLanguage  { height:20px; }

.TTToolMenuFlags { margin-left:-20px; }
.TTTiny .TTToolMenuFlags { margin-left:-5px; }

/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                         Cell Hint                                                             */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Hint is shown in place of the cell content if the cell content is not shown the whole 
   ...Main is the <div> tag absolutely positioned containing the whole hint; @ Set margin to shift the hint and background, border and padding
   ...Outer is added to inner <div> inside ...Main along with all the cell css classes; @ Carefully set the attributes to override the cell settings
   ...Shadow is set to <div> tag displayed under hint ...Main tag, on the same position and size; @ Set margin for the shadow shift, background, opacity and border
   ...Header... is added to ...Main, ...Outer and ...Shadow for Header row (for every row is added ...xxx..., where xxx is the row Kind and for Header is Header)
   ...SpaceEdit is added to ...Main, ...Outer and ...Shadow for editable Space cell (for Space cell is added also the ...xxx... as for row Kind along with the ...SpaceEdit...)
   ...Space... is added to ...Main, ...Outer and ...Shadow for not editable Space cell (for Space cell is added also the ...xxx... as for row Kind along with the ...Space...)
   ...Width is used for precise measuring cell width to show the hint or not, for ShowHint 4 and 5
*/

.TTHintMain { position:absolute; margin-left:-2px; margin-top:-2px; padding-left:1px; padding-top:1px; padding-bottom:1px; left:0px; top:0px; z-index:257; cursor:default; }
.TTMini .TTHintMain { padding-top:0px; padding-bottom:0px; }
.TTMini .TTHintDataMain { margin-top:-3px; }
.TTHintHeaderMain,.TTHintFilterMain { padding:0px; margin-left:0px; margin-top:0px; border:0px none; }
/*.TTWide.TTIE .TTHintHeaderMain { padding-top:1px; }
.TTGiant.TTIE .TTHintHeaderMain { padding-top:0px; }*/
.TTHintSpaceMain { margin-left:-1px; margin-top:-1px; padding:0px; overflow:hidden; }
.TTHintSpaceEditMain,.TTHintSpaceSelectMain { border:0px none; background:none; margin-left:0px; margin-top:0px; padding:0px; overflow:hidden; }
.TTHintSpaceSelectMain { margin-top:-1px; }
.TTHintOuter { overflow:hidden; text-align:left; display:table-cell; } 
.TTHintOuter * { text-align:left; text-overflow:clip; }
.TTHintOuterRight,.TTHintOuterRight * { text-align:right; }
.TTHintOuterCenter,.TTHintOuterCenter * { text-align:center; }
.TTHintSpaceOuter { margin-left:-1px; margin-top:-1px; }
.TTHintSpaceEditOuter { }
.TTHintSpaceSelectOuter { padding-left:6px; }
.TTLow .TTHintSpaceSelectOuter { padding-left:3px; }
.TTHintSpaceSelectOuter > div { border:0px none; }
.TTHintHeaderOuter { }
.TTHintShadow { position:absolute; display:none; }
.TTHintSpaceShadow { }
.TTHintSpaceEditShadow,.TTHintSpaceSelectShadow { }
.TTHintWidth > table { width:auto; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                              Printing                                                         */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Class added to <body> tag when printing grid to actual page or to new window (for PrintLocation != 2); @ Set any <body> attribute */
.TTBodyPrint,.TTBodyPrintPDF { margin:0px; padding:0px!important; border:0px none!important; background:none!important; -webkit-print-color-adjust:exact; }
.TTBodyPrint { margin:0px!important; }

/* PDF header and footer to hide Chrome default header and footer */
.TTPrintHead,.TTPrintFoot { position:fixed; background:white; width:100%; height:35px; z-index:-1; }
.TTSoft .TTPrintHead,.TTSoft .TTPrintFoot { background-color:#F2F2F2; }
.TTDim .TTPrintHead,.TTDim .TTPrintFoot { background-color:#EAEAEA; }
.TTPrintHead { top:0; }
.TTPrintFoot { bottom:0; }

/* Class added to every printed page */
.TTPrintPage { page-break-inside:avoid; page-break-after:always; }
.TTPrintPage:last-child { page-break-after:auto; }


/* -------------------------------------------------------------------------------------------------------------------------- */
/*                                                          System settings                                                      */
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Border shown in main tag during grid resizing */
.TTResizeBorder { border:1px dashed black!important; }

/* Disables momentum scroll when dialog is opened */
.GridNoMomentumScroll * { -webkit-overflow-scrolling:auto!important; }

/* Temporary tag used for some calculations; @ Do not change; ! Note, here is no .TT style prefix */
.GridTmpTag { position:absolute; left:5px; top:5px; visibility:hidden; } 

/* Tag used to calculate column width according to its content */
.GridCalcWidth table { width:auto!important; }

/* Tag where the grid is rendered and also where all the support absolute tags are rendered (e.g. cursors, dialogs or messages). ! Note, here is no .TT style prefix
   @ Increase z-index if the grid or its menus or cursors are not shown as expected. But it is usually better to set <Cfg ZIndex/> instead.
*/
.GridMain { z-index:255; }

/* Marks the style loaded; must be the last class in the file; @ Do not change */
.TTLoaded { border:1px solid black!important; }